javascript - 将鼠标悬停在父元素而非子元素上

Question

我只想在鼠标悬停在父 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>

非常感谢您的帮助。谢谢!

Answer 1

您始终可以阻止子元素上的事件传播来实现这一点:

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

$('.parent').on('mouseenter', function () {
  console.log('mouseenter');
});

$('.child').on('mouseenter', function (e) {
  e.stopPropagation();
});

.parent {
  width: 300px;
  height: 300px;
  background-color: #ccc;
}

.child {
  width: 200px;
  height: 200px;
  background-color: #999;
}

.child > .child {
  width: 100px;
  height: 100px;
  background-color: #333;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
  <div class="child">
    <div class="child">
    </div>
  </div>
</div>

干杯。 :)