首先,我想说这不是一个重复的问题,因为我看了其他问题,似乎没有任何工作/适用于我正在做的事情。jQuery mouseenter和mouseleave产生闪烁
问题是,当我将鼠标悬停在目标div上时,如果我移动鼠标,效果会闪烁,如果我将鼠标悬停在div上并将鼠标放在相同位置,它不会闪烁。
我曾尝试使用.show和.hide代替和其他功能,会给我想要的效果,但我仍然得到闪烁的问题。
这是我使用的HTML。
<div class="four-icons">
<div class="icon-wrapper col-md-3">
<div class="mouse-over-1"><img src="img/bookatable-hover.png"></div>
<img class="icons-1" src="img/book%20a%20table.jpg">
</div>
<div class="icon-wrapper col-md-3">
<div class="mouse-over-2"><img src="img/menus-hover.png"></div>
<img class="icons-2" src="img/menus.jpg">
</div>
<div class="icon-wrapper col-md-3">
<div class="mouse-over-3"><img src="img/christmas-hover.png"></div>
<img class="icons-3" src="img/christmas.jpg">
</div>
<div class="icon-wrapper col-md-3">
<div class="mouse-over-4"><img src="img/contactus-hover.png"></div>
<img class="icons-4" src="img/contact.jpg">
</div>
</div>
这是对应的jQuery:
$(document).ready(function(){
$("img.icons-1").mouseenter(function(){
$("div.mouse-over-1").css("display", "block").css("position", "absolute");
});
$("img.icons-1").mouseleave(function(){
$("div.mouse-over-1").css("display", "none");
});
$("img.icons-2").mouseover(function(){
$("div.mouse-over-2").css("display", "block").css("position", "absolute");
});
$("img.icons-2").mouseout(function(){
$("div.mouse-over-2").css("display", "none");
});
$("img.icons-3").mouseover(function(){
$("div.mouse-over-3").css("display", "block").css("position", "absolute");
});
$("img.icons-3").mouseout(function(){
$("div.mouse-over-3").css("display", "none");
});
$("img.icons-4").mouseover(function(){
$("div.mouse-over-4").css("display", "block").css("position", "absolute");
});
$("img.icons-4").mouseout(function(){
$("div.mouse-over-4").css("display", "none");
});
});
这里是代码的生活:http://muhammadkasimali.co.uk/Cruise/ 以防万一你想复制的问题。
此外,我确实尝试创建一个JSfiddle,但无法使其工作,我几乎是一个noob,所以我很抱歉,如果这是一个糟糕的问题。
您从位置切换绝对的流动。 z-index将被改变并且会产生闪烁。尝试使用可见性:隐藏或全部绝对。 – Eric