我在这里做了一个小提琴:
所以当鼠标在蓝色盒子上时,红色盒子需要放在蓝色盒子上。如您所见,它有效,但如果红色框不在任何蓝色框的顶部,我也希望隐藏它。
我将代码更改为:
if(box.is(':hover')){
// put red box on top
}else{
// hide red box
}
但是效果不是很好:s
你有什么提示吗?
我在这里做了一个小提琴:
所以当鼠标在蓝色盒子上时,红色盒子需要放在蓝色盒子上。如您所见,它有效,但如果红色框不在任何蓝色框的顶部,我也希望隐藏它。
我将代码更改为:
if(box.is(':hover')){
// put red box on top
}else{
// hide red box
}
但是效果不是很好:s
你有什么提示吗?
假设我已经正确理解了这个问题,那么我将停止使用,mousemove
而是将事件处理程序委托给应该触发覆盖的元素:mouseenter
mouseleave
$("body").on("mouseenter", ".Box", function () {
// Show the overlay
}).on("mouseleave", ".Box", function () {
// Hide the overlay
});
因为叠加层位于元素的顶部,所以当您在元素本身内移动鼠标时,它不会很好地工作。要解决此问题,您可以向叠加层添加 CSS 属性:
#over {
/* ... */
pointer-events: none;
}
这是一个工作示例。