Mouseenter / Mouseleave產生閃爍效果

Question

我有一個黑色的圖標，當光標懸停在它上面時，我想變成藍色。 如果我保持光標靜止不動，它會變成藍色，但是如果我將其四處移動，該圖標將開始閃爍藍色和黑色。 我做了一個jfiddle來說明：

http://jsfiddle.net/8t2whdop/3/

這是我視圖中的代碼：

<%= image_tag("IconBlack.png", class: "link", id: "icon-black") %>
<%= image_tag("IconBlue.png", class: "link", id: "icon-blue") %>
<script type="text/javascript">
  $('#icon-blue').hide();
  $('#icon-black').mouseenter(function () {
    $('#icon-black').hide();
    $('#icon-blue').show();
  });
  $('#icon-black').mouseleave(function () {
    $('#icon-black').show();
    $('#icon-blue').hide();
  });
</script>

顯然，考慮到類似問題的數量，這是mouseenter / leave的常見問題。 但是，這不是重復的，因為我嘗試了所有發現的解決方案，但是都沒有解決我的特定問題。 例如，我嘗試了mouseover / out / enter / leave / toggle / hover的所有不同組合。 如何停止閃爍效果？

Answer 1

只需使用右選擇器$('#icon-blue').mouseleave demo

$('#icon-blue').hide();
$('#icon-black').mouseenter(function () {
  $('#icon-black').hide();
  $('#icon-blue').show();
});
$('#icon-blue').mouseleave(function () { // the #icon blue!!!
  $('#icon-black').show();
  $('#icon-blue').hide();
});

另請注意，您需要的是純CSS

在任何一種情況下，如果你將圖標包裝在一個共同的父元素中，那么為這些東西編寫JS和CSS會更容易 - 因為，你需要的只是目標:hover或jQ .hover()那個父.hover() 。

Answer 2

首先，你可以只使用CSS，不需要JS：

http://jsfiddle.net/8t2whdop/7/

HTML

<div id="icon">
</div>

CSS

#icon{
    height: 60px;
    width: 60px;
    background: black;
}
#icon:hover{
    background: blue;
}

然后我將解釋為什么你的代碼給出了這個結果（預期）：

當您將鼠標懸停在黑色圖標上時，您將在其上調用jQuery hide方法來設置display: none; 在黑色圖標上（幾毫秒后），從而觸發mouseleave事件。 因此它會立即再次顯示黑色圖標，觸發mouseenter事件等等......

如果您不想（或不需要）使用JS，可以使用包裝div來捕獲事件（但即使如此，為每個背景使用兩個不同的div效率不高）：

HTML

<div id="icon">
    <div id="icon-black"></div>
    <div id="icon-blue"></div>
</div>

JS

$('#icon-blue').hide();
$('#icon').mouseenter(function () {
  $('#icon-black').hide();
  $('#icon-blue').show();
});
$('#icon').mouseleave(function () {
  $('#icon-black').show();
  $('#icon-blue').hide();
});

看小提琴：

http://jsfiddle.net/8t2whdop/6/

Answer 3

我認為使用css會更好地解決這個問題，如果你只想在懸停時改變顏色

#icon{
    height: 60px;
    width: 60px;
    background-color: black;
}

#icon:hover{
    background-color: blue;
}

如果需要更改框的圖像：

#icon{
    height: 60px;
    width: 60px;
    background-image: url("IconBlack.png");
}

#icon:hover{
    background-image: url("IconBlue.png");

}