Javascript 将鼠标悬停在父元素而不是子元素上

我只想在鼠标位于父

li

而非子

ul

或

li

上方时触发悬停。 这是我不工作的代码

$('#menu-header-menu').on("mouseenter", ".menu-item:not(.menu-item .sub-menu)", function() {
 $(this).find(".sub-menu").slideToggle();
});

这是我的html代码

<ul id="menu-header-menu" class="menu" style="display: block;">
<li id="menu-item-1549" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-1536 current_page_item menu-item-1549"><a href="myurl">Home</a></li>
<li id="menu-item-1627" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1627"><a href="myurl">Photo 1</a>
    <ul class="sub-menu" style="display: none;">
    <li id="menu-item-1631" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1631"><a href="myurl">Page1</a></li>
    <li id="menu-item-1630" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1630"><a href="myurl">Page 2</a></li>
    </ul>
</li>
<li id="menu-item-1626" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-1626"><a href="myurl">Photo 2</a>
    <ul class="sub-menu" style="display: block;">
    <li id="menu-item-1633" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1633"><a href="myurl">Page1</a></li>
    <li id="menu-item-1632" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1632"><a href="myurl">Page 2</a></li>
    </ul>
</li>
<li id="menu-item-1548" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1548"><a href="myurl">Project</a></li>
</ul>

---

非常感谢你的帮助。谢谢大家!

如果不希望子事件冒泡到父事件，则需要对子事件使用

stopImmediatePropagation（）

，在本例中为悬停。它可能看起来像这样：

$('.child').on('hover',function(e){
    e.stopImmediatePropagation();
});

---

始终可以防止子元素上的事件传播，以实现以下目的：

您可以阅读关于上的事件传播的更多信息，但一般的想法是所有事件都会向上传播DOM树，因此即使发生在子元素上的事件也会在其每个父元素上触发

$（'.parent'）。在（'mouseenter'，函数（）{
console.log（'mouseenter'）；
});
$（'.child'）。on（'mouseenter'，函数（e）{
e、 停止传播（）；
});
.parent{
宽度：300px；
高度：300px；
背景色：#ccc；
}
.孩子{
宽度：200px；
高度：200px；
背景色：#999；
}
.child>.child{
宽度：100px；
高度：100px；
背景色：#333；
}
如果不想停止事件传播，可以将与事件处理程序相关的元素（
this
）与事件开始冒泡的元素（
ev.target
）进行比较。如果它们相同，您就知道
这是鼠标光标悬停的第一个元素：


$（“#无if”）。查找（“ul，li”）。悬停（功能（ev）{
$（this.toggleClass（“悬停”）；
});
$（“#带if”）。查找（“ul，li”）。悬停（函数（ev）{
如果（此===ev.目标）{
$（this.toggleClass（“悬停”）；
}
});
div{
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
宽度：120px；
}
李先生{
列表样式：无；
填充：30px0；
}
保险商实验室{
背景：蓝色；
}
李{
背景：黄色；
}
.悬停{
背景：红色；
}
#无if*{
左侧填充：30px；
}
#如果*{
右侧填充：30px；
}

不带IF的
在黄色的小广场上盘旋。
如果
你能分享你的html吗我现在正在添加html。