Jquery 鼠标悬停（）能否对鼠标指针上不存在的元素作出反应？

我使用的导航如下所示：

<div id="navigation">
<ul>
    <li>One
        <ul>
            <li>One1</li>
            <li>One2</li>
            <li>One3</li>
            <li>One4</li>
        </ul>
    </li>
    <li>Two
        <ul>
            <li>Two1</li>
            <li>Two2</li>
            <li>Two3</li>
            <li>Two4</li>
        </ul>
    </li>
    <li>Three
        <ul>
            <li>Three1</li>
            <li>Three2</li>
            <li>Three3</li>
            <li>Three4</li>
        </ul>
    </li>
    <li>Four</li>
    <li>Five</li>
</ul>
<div id="subnavigation">
</div>

当鼠标在“一”、“二”、“三”上移动时。。我将子条目复制到subnavigation div中。它应该留在那里，并且只要鼠标在导航或subnavigation上，它就应该显示

这就是下面的javascript代码应该做的。它显示和隐藏子导航：

// display and hide subnavigation bar
$(function(){
    $('#navigation,#subnavigation>ul>li').hover(function(e){
        $('#subnavigation').show();
    },function(e){
        $('#subnavigation').hide();
    });
});

例如，当鼠标在导航中悬停“Two”时，子导航将显示“Two1”、“Two2”。。。显示。 当鼠标悬停（例如“Two2”）时出现问题：然后子导航消失。但是，当鼠标悬停在列表元素未执行的子导航部分时，它不会消失

当$（'#navigation，#亚导航>ul>li'）。出现悬停时#亚导航>ul>li尚不存在。由于这个原因，jquery可能不会“注意”鼠标何时离开#navigation，但不会#subnavigation>ul>li？如果是，该问题的常见解决方案是什么

谢谢你的帮助

试试这个：

HTML代码：

<div id="navigation">
<ul>
    <li>One
        <ul class="subnavigation">
            <li>One1</li>
            <li>One2</li>
            <li>One3</li>
            <li>One4</li>
        </ul>
    </li>
    <li>Two
        <ul class="subnavigation">
            <li>Two1</li>
            <li>Two2</li>
            <li>Two3</li>
            <li>Two4</li>
        </ul>
    </li>
    <li>Three
        <ul class="subnavigation">
            <li>Three1</li>
            <li>Three2</li>
            <li>Three3</li>
            <li>Three4</li>
        </ul>
    </li>
    <li>Four</li>
    <li>Five</li>
</ul>
</div>

Jquery代码：

$(function(){
    $('#navigation ul li').hover(function(e){
        $(this).find('.subnavigation').show();
    },function(e){
        //alert($(e.target).parent("ul").hasClass('.subnavigation'))
        if(!$(e.target).parent("ul").hasClass('subnavigation')){
            $('.subnavigation').hide();
        }
    });
});

---

您可以使用user元素。on（'hover'，function（）{}）来执行此操作。我尝试过这样做，但效果似乎相同。有什么不同？我已经编辑了你的标题。请看，共识是“不，他们不应该”。

#navigation>ul>li {
    float:left;
    list-style:none;
    padding:5px;
}
ul.subnavigation {
  display: none;
}

$(function(){
    $('#navigation ul li').hover(function(e){
        $(this).find('.subnavigation').show();
    },function(e){
        //alert($(e.target).parent("ul").hasClass('.subnavigation'))
        if(!$(e.target).parent("ul").hasClass('subnavigation')){
            $('.subnavigation').hide();
        }
    });
});