阻止元素取消悬停

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> 上{{1}}也是如此。

{{1}}

JSFiddle demo

Answer 2

你可以通过css解决这个问题。给出显示在以下样式规则顶部的元素： pointer-events: none;

这样光标就会忽略＆＃39;元素和你的悬停效果仍然有效。但是，这确实意味着顶部的元素不再可点击。

编辑：

#overlay_1 {
    pointer-events: none;
}

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

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