jQuery mouseenter 只是在闪烁 img答案

【问题标题】：jQuery mouseenter is just flickering the imgjQuery mouseenter 只是在闪烁 img
【发布时间】：2017-05-12 06:26:24
【问题描述】：

我正在处理一个我想显示图像的项目，当鼠标移到图像上时，图像消失并且页面上的信息出现。当鼠标移出元素时，图像会重新出现。我正在使用 mouseenter 和 mouseleave，但是如果鼠标稍微移动，图像就会一直闪烁。

$(".second-div").mouseenter(function() {
  $(this).removeClass("second-div");
});
$(".second-div").mouseleave(function() {
  $(this).addClass("second-div");
});

.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="first-div">

</div>

<div class="second-div">

</div>

这里是 jsfiddle：

https://jsfiddle.net/cjbruin/t78v7tyj/

【问题讨论】：

为什么您的演示与您的问题代码不匹配？为什么要为此使用 JS？
可能是因为内容消失了，所以它消失了，导致休假触发......
我更新了代码。抱歉复制了错误的演示。

标签： javascript jquery html css

【解决方案1】：

不需要 JS 或 jquery，你可以用 CSS 来做到这一点。只需在:hover上切换顶部元素的不透明度

.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
  transition: opacity .25s;
}

.second-div:hover {
  opacity: 0;
}

<div class="first-div">
  content
</div>
<div class="second-div">
</div>

【讨论】：

【解决方案2】：

我同意 CSS 解决方案更好更简洁。但下面是我相信你试图用 jQuery 完成的事情。

在您最初的问题中，您正在添加/删除导致鼠标事件异常触发的 second-div 类。

$(".second-div").mouseenter(function() {
  $(".second-div").hide();
});
$(".first-div").mouseleave(function() {
  $(".second-div").show();
});

.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<div class="first-div">

</div>

<div class="second-div">

</div>

【讨论】：

是的，这正是我想要的，我不知道为什么我没有尝试隐藏和显示。谢谢！

【解决方案3】：

试试这个： https://jsfiddle.net/houtan/mc4vLgev/

 $("#parentDiv").mouseenter(function() {
   var hasDiv = $( "#secondDiv" ).hasClass( "second-div" ).toString();
   $( "#result1" ).html( "is hover:  " + hasDiv );
   $("#secondDiv").removeClass("second-div");
 });
 $("#parentDiv").mouseleave(function() {
   var hasDiv = $( "#secondDiv" ).is( ".second-div" ).toString();
   $( "#result1" ).html( "is hover:  " + hasDiv );
   if (hasDiv==="false")
   {
   		$("#secondDiv").addClass("second-div");
   }
 });

#parentDiv {
  width: 300px;
  height: 200px;
}

.first-div {
  height: 200px;
  width: 300px;
  border: 1px solid black;
}

.second-div {
  height: 200px;
  width: 300px;
  border: 1px solid red;
  position: relative;
  bottom: 201px;
  background-image: url(https://image.freepik.com/free-vector/nature-background-of-a-grassy-landscape_1048-1305.jpg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parentDiv">
<div id="firstDiv" class="first-div">

</div>

<div id="secondDiv" class="second-div">

</div>
</div>
<div id="result1">is hover: </div>
<script>
</script>

【讨论】：