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

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，而是将mouseenter和mouseleave事件处理程序委托给应触发叠加层的元素：

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

因为叠加层位于元素之上，所以当您在元素本身内移动鼠标时，它将无法正常工作。要解决此问题，您可以向叠加层添加CSS属性：

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

这是working example。