Question

我有一个黑色图标，当光标悬停在它上面时我想变成蓝色。如果我保持光标不动，它会变成蓝色，但是如果我移动它，图标会开始闪烁蓝色和黑色。我做了一个小问题来说明：

以下是我认为的代码：

<%= 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();
});

另请注意，您需要的内容可以在 pure CSS

中完成

在任何一种情况下，如果将图标包装在一个共同的父元素中，那么为这些事情编写JS和CSS会更容易 - 因为，所有你需要的只是目标:hover或jQ .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");

}

Mouseenter / Mouseleave创建闪烁效果

3 个答案: