首先,我想說這不是一個重複的問題,因爲我看了其他問題,似乎沒有任何工作/適用於我正在做的事情。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