javascript - 鼠标悬停后用 mouseout 回到以前的状态？ - 不设置固定值

Question

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

我希望在用鼠标离开按钮后填充颜色回落到之前的“选定”颜色。我知道我可以为 mouseout-function 定义一个固定值。但是，如果用户通过单击选择颜色，我希望设置单击的选项(稍后将它们放入 php 变量中)和快速鼠标悬停-'blend- ins 真的应该暂时显示用户悬停..

也就是说:如果用户之前点击过，则通过回退到点击状态来退出鼠标悬停状态。

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

可能我的 JS-Example 比我的话解释得更好:

$(function(){
$("#s01aFI").css("fill","#fff");

  $("#fw01-f01").mouseover(function(){
  $("#s01aFI").css("fill","#e53741");
  });
  $("#fw01-f01").click(function(){
  $("#s01aFI").css("fill","#e53741");
  });
  $("#fw01-f01").mouseout(function(){
  $("#s01aFI").css("fill","RECENT-STATE");
  });

  ...

});

.f01 { background-color:#e53741; }
.f02 { background-color:#419327; }
...

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
*JS-Function*
</script>

<svg>
<path id="s01aFI" d="***"/>
</svg>

<button id="fw01-f01" class="farbwahler f01">01</button>
<button id="fw01-f02" class="farbwahler f02">02</button>
...

附言如果你能给我一个冗余的提示，那就太好了；因为我即将对很多颜色和元素执行此操作，而且从昨天开始我是 JS 的新手。 :)

Answer 1

如果我没看错你想要这段代码:

$(this) - 与悬停的当前按钮一起使用

$(function(){
  var preview = $("#s01aFI");
  var colorBut = $(".farbwahler"); //any button
  var curColor = "gold";

  colorBut.mouseover(function(){
    $(this).data('clicked', false);
    var color = $(this).css('background-color');
    preview.css("fill",color);
  });
 
  colorBut.mouseout(function(){
    var isClick = $(this).data('clicked');
    if(!isClick){
      var color = $(this).css('background-color');
      preview.css("fill",curColor );
    }
  });
  
  colorBut.click(function(){
    var color = $(this).css('background-color');
    preview.css("fill",color);
    curColor = color;
    $(this).data('clicked', true);
  });
});

.f01 { background-color:#e53741; }
.f02 { background-color:#419327; }

svg {
  width: 200px;
  height: 200px;
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<svg>
  <path id="s01aFI" d="M 10,110 L 10,10 L 40,50 L 70,10 L 100,50 L 130,10 L 130,110 z"
          fill="gold" stroke="orange" stroke-width="5"/>
</svg>

<button id="fw01-f01" class="farbwahler f01">01</button>
<button id="fw01-f02" class="farbwahler f02">02</button>