jQuery 悬停下拉菜单不起作用

Question

HTML:

<div style="position:relative" id="user">User
    <div id="logout" style="display:none; position:absolute; right:0px; top:20px">Logout</div>
</div>

jQuery:

$("#user").hover(function(){
    $('#logout').toggle();
});

将鼠标悬停在“用户”一词上时会出现注销 div，问题是，当将鼠标移到注销部分时它会消失。

Answer 1

当您的“注销”文本变得可见时，它位于 #user 的外部，因此当您将光标移动到 #logout 时，您离开悬停区域。

以下demo fiddle应该帮忙解释一下。其中 #logout2 保留在悬停区域内。

<div style="position:relative" id="user">User
    <div id="logout" style="display:none; position:absolute; right:0px; top:20px">Logout</div>
</div>
<hr />
<div style="position:relative" id="user2">User2
    <div id="logout2" style="display:none; position:absolute; right:0px; top:0px">Logout2</div>
</div>

http://jsfiddle.net/qkm0xbgw/

(P.S 示例标记中的内联 css 不正确，某些属性之间缺少冒号)