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

随着您的退出＆＃39;文本变得可见它是#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不正确，并且在某些属性之间缺少冒号）~~

Answer 2

您也可以使用简单的CSS规则而不是jquery来解决这个问题：

#user:hover #logout {
    display: block !important;
}

（需要!important，否则它不会覆盖您的内联样式）

Answer 3

尝试类似：

id = $(this).attr('id');
if(id != "logout"){
    $('#logout').toggle();
}

Answer 4

当hover方法检查光标入口并退出到所选元素（此处为#user）时，必然会发生这种情况。因此，只要光标退出div，就会再次触发toggle方法。正如jQ docs中所见：

.hover（）方法在传递单个函数时，将为mouseenter和mouseleave事件执行该处理程序。这允许用户在处理程序中使用jQuery的各种切换方法，或者根据event.type在处理程序中做出不同的响应。

您可以尝试使用mouseenter和mouseleave：

    $(document).ready(function() {
        $("#outer").mouseenter(function() {
            $("#inner li").css("display","block");
        });
        $("#inner li").mouseleave(function() {
            $("#inner li").css("display","none");
        })
    })

使用html：

<ul id = "outer"> 
<li>Link1
    <ul id = "inner" style = "position:relative;">
        <li style = "display:none;">Sublink1</li>
    </ul>
</li>

jQuery悬停下拉菜单无法正常工作

4 个答案: