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

Question

我在这里做了一个 fiddle :

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 事件处理程序委托(delegate)给应该的元素触发叠加:

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

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

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

这是一个working example .