jQuery mouseove和mouseout事件不断触发

关于锋利的jQuery第三章结尾提示图片效果(鼠标放在图片上会出现一个大图跟随鼠标移动)实现时mouseove和mouseout事件不断触发的问题

html

<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事件不断出发，以致于形成鼠标旁边的大图不断闪烁，网上百度闪烁的缘由是事件冒泡

但我试着把mouseover和mouseout事件名改成mouseenter和mouseleave后依旧无论用，想了好久才发现缘由：

当鼠标进去某一张图片后，我设置大图出现的位置恰好是鼠标的位置，该位置上方是大图出现的位置，下面是原图，因此才会不断闪烁

解决方案：

$('#tooltip').css({

"position": "fixed",

"top": e.pageY + 10 + "px",

"left": e.pageX + 20 + "px"

});

让大图出现的位置不要恰好在鼠标的位置