防止元素取消悬停

Question

我有一个简单的.hover文本元素:

$('#menu_1').hover(function() { 
    $('#overlay_1').fadeIn('slow');
       }, function() { 
    $('#overlay_1').fadeOut('slow');
});

所发生的是，一个元素显示在文本元素之上。但是这个元素干扰了.hover()，因为光标现在在新显示的元素上，而不是在文本上。有办法防止这种情况发生吗?

我希望显示的元素在文本

Answer 1

你可以把#overlay_1元素放在你的#menu_1元素中，这样即使你悬停在#overlay_1上，你也会悬停在#menu_1上。

<elem id="menu_1">
    <elem id="overlay_1"></elem>
</elem>

<<p> JSFiddle演示/strong>。

Answer 2

可以通过css解决这个问题。给出现在顶部的元素设置如下样式规则:pointer-events: none;

这样，光标将"忽略"该元素，而你的悬停效果仍然有效。但是，这确实意味着顶部的元素不再是可点击的。

编辑:

#overlay_1 {
    pointer-events: none;
}

http://jsfiddle.net/c8fqvbcp/2/

编辑:我没有意识到这一点，但有人向我指出浏览器支持不理想:http://caniuse.com/#search=pointer-events