所以我有一个简单的#container div 设置，其中包含一个#field div。 我还有一个不可见的#hover 跨度，它跟随鼠标移动(居中)并在悬停在#field 上时变得可见。
HTML:
<body>
<div id="container" >
<div id="field"></div>
</div>
<span id="mouseHover" ></span>
</body>
JS:
$("#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");
}
});
当鼠标悬停在 field 上时，只要我移动鼠标，它就会触发无数的 mouseenter 和 mouseleave(+ 预期的 mousemove)事件。这似乎是这种情况，因为#hover 跨度以鼠标为中心，每次我移动鼠标时，我在技术上离开#field 并输入#hover，然后一次又一次地离开#hover 并输入#field，导致#hover连续显示和隐藏。
我的一个解决方案是不让#hover 围绕鼠标居中，这样鼠标就不会触及跨度的边界，因此不会离开#field。但我希望它居中 ^^
另一个是给 span 一个负的 z-index，这不是真正的解决方案，因为 #hover 一旦获得 bgcolor 就会消失在#field 后面。
JSFiddle with the problem (#hover is "flashing" when centered around mouse)
这里正确的方法是什么 :)？
最佳答案
尝试给 #mouseHover 元素一个 pointer-events CSS property “无”的值(value)。这是一个 updated JSFiddle .
#mouseHover {
// ...
pointer-events: none;
}
关于javascript - 在重叠的 div 上触发多个 mouseenter/mouseleave 事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32024888/