jQuery mouseenter只是闪烁的img

Question

我正在一个要显示图像的项目上，当鼠标移到图像上时，图像消失并且页面上的信息出现。 当鼠标移出元素时，图像会重新出现。 我正在使用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/

Answer 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> 

Answer 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> 

Answer 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>