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

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

这是一个jsFiddle，展示了类似于我想要的东西。

修改

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

Click through a DIV to underlying elements

Answer 2

你可以试试这个。

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

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

2 个答案: