ch4*_*40s 4 html javascript css jquery
所以我有一个#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");
}
});
但是，当悬停在该字段上时，只要我移动鼠标，它就会触发无数的 mouseenter 和 mouseleave（+ 预期的 mousemove）事件。情况似乎是这样，因为 #hover 跨度以鼠标为中心，每次我移动鼠标时，我在技术上离开 #field 并输入 #hover，然后离开 #hover 并一次又一次地输入 #field，从而导致 #hover连续显示和隐藏。
我拥有的一种解决方案是不将 #hover 围绕鼠标居中，因此鼠标不会触及跨度的边界，因此不会离开 #field。但我希望它居中^^
另一种方法是给 span 一个负的 z-index，这不是真正的解决方案，因为一旦获得 bgcolor，#hover 就会消失在 #field 后面。
JSFiddle 有问题（#hover 以鼠标为中心时“闪烁”）
这里的正确方法是什么:)？
尝试给#mouseHover元素一个pointer-eventsCSS 属性值“none”。这是一个更新的 JSFiddle。
#mouseHover {
// ...
pointer-events: none;
}
| 归档时间： |
|
| 查看次数： |
1277 次 |
| 最近记录： |