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

【问题标题】：Detect if mouse is outside of multiple elements检测鼠标是否在多个元素之外
【发布时间】：2013-11-07 06:04:50
【问题描述】：

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

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

我把代码改成：

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

但效果不是很好：s

你有什么提示吗？

【问题讨论】：

看看 mouseenter 和 mouseout。你想要什么样的“隐藏”？您的示例显示它回到 0,0,0,0 还是您希望它完全隐藏然后在另一个框悬停时从 0,0,0,0 重新出现？
是的，我只想让它回到 0,0，宽度和高度为 0
@Alex - 你想让覆盖层像这样在 mouseleave 上动画吗？ jsfiddle.net/RrxpT/2

【解决方案1】：

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

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

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

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

【讨论】：