jQuery mouseove和mouseout事件不斷觸發

關於鋒利的jQuery第三章結尾提示圖片效果(鼠標放在圖片上會出現一個大圖跟隨鼠標移動)實現時mouseove和mouseout事件不斷觸發的問題css

htmlhtml

<ul class="box">
<li class="item"><img class="imgitem" src="./images/img (1).jpg" alt=""></li>
<li class="item"><img class="imgitem" src="./images/img (2).jpg" alt=""></li>
<li class="item"><img class="imgitem" src="./images/img (3).jpg" alt=""></li>
<li class="item"><img class="imgitem" src="./images/img (4).jpg" alt=""></li>
</ul>

 

js
$(function(){ var tooltip; $('.imgitem').mouseover(function(e) { tooltip = "<div id='tooltip'><img src='" + $(this).attr('src') + " '></div>"; $('body').append(tooltip); $('#tooltip').css({ "position": "fixed", "top": e.pageY + "px", "left": e.pageX + "px" }); }).mousemove(function(e){ $('#tooltip').css({ "position": "fixed", "top": e.pageY + "px", "left": e.pageX + "px" }); }).mouseout(function() { $('#tooltip').remove(); }); })

 

 
 
跟書上的代碼不太同樣
 

 

我發現mouseover和mouseout事件不斷出發,以致於形成鼠標旁邊的大圖不斷閃爍,網上百度閃爍的緣由是事件冒泡git

但我試着把mouseover和mouseout事件名改成mouseenter和mouseleave後依舊無論用,想了好久才發現緣由:app

當鼠標進去某一張圖片後,我設置大圖出現的位置恰好是鼠標的位置,該位置上方是大圖出現的位置,下面是原圖,因此纔會不斷閃爍this

解決方案:spa

$('#tooltip').css({
"position": "fixed",
"top": e.pageY + 10 + "px",
"left": e.pageX + 20 + "px"
});
讓大圖出現的位置不要恰好在鼠標的位置
相關文章
相關標籤/搜索