jQuery悬停下拉菜单不工作

HTML:

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

---

当鼠标悬停在单词User上时会出现logout div，问题是，当鼠标移动到logout部分时，它会消失。

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

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

（需要

！important

，否则它将不会覆盖您的内联样式）

尝试以下操作：

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

---

当您的“注销”文本可见时，它位于

#user

之外，因此当您将光标移动到

#logout

时，您将离开悬停区域

下面应该有助于解释。在其中，

#logout 2

保留在悬停区域内

<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>

用户
注销

用户2
注销2

---

（p.S示例中的内联css标记不正确，并且某些属性之间缺少冒号）

当

hover

方法检查光标进入和退出所选元素（此处

#user

）时，必然会发生这种情况。因此，一旦光标退出div，就会再次触发

切换

方法。如jQ文档所示：

.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>

链接1

子链接1

---

jquery接受两个函数，这两个函数对我来说都适用：。创建一个小提琴来演示问题。我不适用，实际上我发布了精简的代码，下面是完整的：我已经对它进行了排序，我在页面顶部使用display:inline或float:left排列了一些东西，但没有；I don’’我不喜欢鼠标落在这条“线”下面，把所有那些刻度的高度都调大意味着鼠标会留在这条线里，它会工作，除了刻度的底部，我可以忍受

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