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

Question

我有一个 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 时消失，以及它上方的所有内容。这可能吗？

(我读过其他关于此的问题，但似乎没有一个适合我的情况)

Answer 1

仍然不是肯定的我确切地知道预期的行为是什么，但你可能只需要在你的 上将 css 中的 pointer-events 属性设置为 none出现在查看器上方。

这是一个jsFiddle展示与我认为您想要的类似的内容。

编辑

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

Click through a DIV to underlying elements