当鼠标移动到覆盖元素的东西时不要触发 onmouseout答案

【问题标题】：Don't fire onmouseout when mouse moves to something overlaying the element当鼠标移动到覆盖元素的东西时不要触发 onmouseout
【发布时间】：2013-02-14 05:10:41
【问题描述】：

我有一个 iframe #viewer 和一个绝对定位的元素 #appear_above_viewer 出现在它上面。我希望#appear_above_viewer 在鼠标经过#viewer 时淡入，在鼠标离开时淡出。

到目前为止，我有这个代码：

$("#viewer").hover(
    function(){ $("#appear_above_viewer").animate({ opacity: 1 }, 'slow'); },
    function(){ $("#appear_above_viewer").animate({ opacity: 0 }, 'slow'); }
);

它似乎有效，直到您将鼠标悬停在#appear_above_viewer 上，它就方便地消失了。我认为这是因为绝对定位的元素被认为与 iframe 不同，它在屏幕上的位置没有区别。

我希望 #appear_above_viewer 仅在鼠标离开 #viewer 时消失，并且它上面的任何东西都完全消失。这可能吗？

（我已经阅读了有关此的其他问题，但似乎都不适用于我的情况）

【问题讨论】：

你必须手动计算鼠标坐标和#viewer的位置
看似简单的事情有那么复杂吗？
是的，因为它不是 iframe 的子级，因此您不能使用 mouseenter/mouseleave 之类的东西或玩事件传播...
当你在上面说的时候，你的意思是覆盖，还是在屏幕上更高？
叠加。很抱歉造成混淆，将更改标题。

标签： javascript jquery html css iframe

【解决方案1】：

仍然不确定我确切地知道预期的行为，但您可能只需要在您的appear_above_viewer 上应用设置为none 的css 中的pointer-events 属性。

这是一个jsFiddle，展示了与我认为你想要的类似的东西。

编辑

您可以将此问题用于跨浏览器解决方案：

Click through a DIV to underlying elements

【讨论】：

【解决方案2】：

你可以试试这个。

onmouseout =function(e){
   if ( e && e.preventDefault )
        e.preventDefault();
        e.stopPropagation();
    else
        window.event.cancelBubble = true;
        window.event.returnValue = false;
    return false;
  }

【讨论】：