javascript - 检测鼠标是否在多个元素之外

Question

我在这里做了一个小提琴：

http://jsfiddle.net/RrxpT/

所以当鼠标在蓝色盒子上时，红色盒子需要放在蓝色盒子上。如您所见，它有效，但如果红色框不在任何蓝色框的顶部，我也希望隐藏它。

我将代码更改为：

if(box.is(':hover')){
  // put red box on top
}else{
  // hide red box
}

http://jsfiddle.net/RrxpT/1/

但是效果不是很好：s

你有什么提示吗？

Answer 1

假设我已经正确理解了这个问题，那么我将停止使用，mousemove而是将事件处理程序委托给应该触发覆盖的元素：mouseentermouseleave

$("body").on("mouseenter", ".Box", function () {
    // Show the overlay
}).on("mouseleave", ".Box", function () {
    // Hide the overlay
});

因为叠加层位于元素的顶部，所以当您在元素本身内移动鼠标时，它不会很好地工作。要解决此问题，您可以向叠加层添加 CSS 属性：

#over {
    /* ... */
    pointer-events: none;
}

这是一个工作示例。