Javascript 用鼠标返回到前一个状态后，用鼠标退出-不设置固定值

我正在开发一个颜色选择器，用JS更改SVG图像的CSS属性。 到目前为止，我的基本代码可以在单击和鼠标悬停时更改SVG路径的填充颜色

我希望在鼠标离开按钮后，填充颜色返回到以前的“选定”颜色。 我知道我可以为mouseout函数定义一个固定值。但是，如果用户通过单击选择颜色，我希望将单击的选择设置为（稍后将其放入php变量中），并且快速鼠标悬停在-“blend-ins”确实应该暂时显示，用户悬停

也就是说：如果用户以前单击过鼠标，通过返回到单击状态退出鼠标悬停状态

立即将颜色设置为鼠标上方的选项；这应该只是用户的视觉指导，而不是设置本身

也许我的JS示例可以比我的文字更好地解释：

$（函数（）{
$（“#s01aFI”）.css（“填充”，“#fff”）；
$（“#fw01-f01”）.mouseover（函数（）{
$（“#s01aFI”）.css（“填充”，“#e53741”）；
});
$（“#fw01-f01”）。单击（函数（）{
$（“#s01aFI”）.css（“填充”，“#e53741”）；
});
$（“#fw01-f01”）.mouseout（函数（）{
$（“#s01aFI”）.css（“填充”、“最近状态”）；
});
...
});
.f01{背景色：#e53741；}
.f02{背景色：#419327；}
…

*JS函数*
01
02
…
如果我理解正确，您需要此代码：

$（此）-使用带有悬停的当前按钮


$（函数（）{
风险值预览=$（“#s01aFI”）；
var colorBut=$（“.farbwahler”）；//任何按钮
var curColor=“黄金”；
colorBut.mouseover（函数（）{
$（此）.data（'clicked'，false）；
var color=$（this.css（'background-color'）；
css（“填充”，颜色）；
});
colorBut.mouseout（函数（）{
var isClick=$（this）.data（'clicked'）；
如果（！isClick）{
var color=$（this.css（'background-color'）；
css（“fill”，curColor）；
}
});
colorBut.click（函数（）{
var color=$（this.css（'background-color'）；
css（“填充”，颜色）；
curColor=颜色；
$（此）.data（'clicked'，true）；
});
});
.f01{背景色：#e53741；}
.f02{背景色：#419327；}
svg{
宽度：200px；
高度：200px；
边框：1px纯红；
}

01
02
是。非常感谢。对于这个答案，你是当之无愧的。：）这不仅是一个有效的方法，也是一个完美的练习，让我跟随你的思路，看看我的想法和它的实际运作方式之间的差异。