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

Posted 2023-05-08

【中文标题】检测鼠标是不是在多个元素之外

【英文标题】：Detect if mouse is outside of multiple elements检测鼠标是否在多个元素之外

【发布时间】：2013-11-07 06:04:50

【问题描述】：

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

http://jsfiddle.net/RrxpT/

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

我把代码改成：

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

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

但效果不是很好：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;

这是working example。

【讨论】：

谢谢：D，但如果我添加指针事件：无，我似乎无法点击红色框中的链接