码迷,mamicode.com
首页 > Web开发 > 详细

jQuery mouseove和mouseout事件不断触发

时间:2019-04-05 00:17:38      阅读:226      评论:0      收藏:0      [点我收藏+]

标签:jpg   height   width   鼠标移动   query   cti   pen   idt   ima   

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

html

<ul class="box">
<li class="item"><img class="imgitem" src="./images/img (1).jpg" ></li>
<li class="item"><img class="imgitem" src="./images/img (2).jpg" ></li>
<li class="item"><img class="imgitem" src="./images/img (3).jpg" ></li>
<li class="item"><img class="imgitem" src="./images/img (4).jpg" ></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"
});
让大图出现的位置不要刚好在鼠标的位置

 

jQuery mouseove和mouseout事件不断触发

标签:jpg   height   width   鼠标移动   query   cti   pen   idt   ima   

原文地址:https://www.cnblogs.com/dyegral/p/10657643.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!