鼠标输入/鼠标离开产生闪烁效果

Mouseenter / Mouseleave creates flickering effect

本文关键字：鼠标 闪烁 输入 离开      更新时间：2023-09-26

>我有一个黑色图标，当光标悬停在它上面时，我想把它变成蓝色。如果我保持光标静止，它确实会变成蓝色，但是如果我移动它，图标开始闪烁蓝色和黑色。我做了一个jfidd来说明：

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>

显然，考虑到类似问题的数量，这是鼠标输入/离开的常见问题。但是，这不是重复的，因为我尝试了找到的所有解决方案，但没有一个可以解决我的特定问题。例如，我尝试了鼠标悬停/出/输入/离开/切换/悬停的所有不同组合。如何停止闪烁效果？

只需使用正确的选择器$('#icon-blue').mouseleave演示

$('#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()该父元素。

首先，你可以只用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/

我认为使用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");
}
相关文章：