在重叠div上触发多个mouseenter / mouseleave事件
因此，我有一个#容器div的简单设置，其中包含一个#字段div。我也有一个看不见的#悬停跨度，它跟随鼠标移动(居中)并在#字段上盘旋时变得可见。
HTML：
<body>
<div id="container" >
<div id="field"></div>
</div>
<span id="mouseHover" ></span>
</body>联署材料：
$("#field").on({
mousemove: function (e) {
var left = parseInt($("#container").css("left")) || 0;
var top = parseInt($("#container").css("top")) || 0;
var newX = e.pageX - left - parseInt($("#mouseHover").css("width")) / 2;
var newY = e.pageY - top - parseInt($("#mouseHover").css("height")) / 2;
$("#mouseHover").css({ left: newX, top: newY });
console.log("MMove");
},
mouseenter: function(e){
$("#mouseHover").show();
console.log("MEnter");
},
mouseleave: function(e){
$("#mouseHover").hide();;
console.log("MLeave");
}
});然而，当它在田野上盘旋时，当我移动鼠标时，它就会触发无数的鼠标和鼠标(+意图mousemove)事件。情况似乎是这样的，因为悬停跨度是围绕鼠标中心的，每次我移动鼠标时，技术上都离开#字段并输入#悬浮，然后一次又一次地离开#悬停和输入#字段，从而使#悬停不断显示和隐藏。
我有一个解决方案，就是不要在鼠标周围移动#悬停，这样鼠标就不会触及跨距的界限，因此就不会离开#字段。但我希望它以^^为中心
另一种方法是给span一个负的z-索引，这不是真正的解决方案，因为#悬停在#字段后面消失了。
有问题的JSFiddle (当鼠标围绕鼠标时，悬停是“闪烁”)
这里的正确方法是什么:)？
回答 2
Stack Overflow用户
发布于 2015-08-15 12:56:26
尝试给#mouseHover元素一个'none‘的CSS属性值。这是一个更新的JSFiddle。
#mouseHover {
// ...
pointer-events: none;
}Stack Overflow用户
发布于 2015-08-15 12:59:38
我有一个解决方案，就是不要在鼠标周围移动#悬停，这样鼠标就不会触及跨距的界限，因此就不会离开#字段。
通过使用pointer-events使鼠标光标“不可触摸”，您可以很容易地在现代浏览器中实现这个目标：
#mouseHover {
pointer-events: none;
}https://jsfiddle.net/6rauo9ba/3/
当然，如果您不需要以任何方式与#mouseHover元素中的内容交互，这将只是一个解决方案。
您可能希望检查浏览器支持，以确定您可能需要一个后备解决方案的旧浏览器。http://caniuse.com/#feat=pointer-events
https://stackoverflow.com/questions/32024888
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号