Hover over parent element not child

Question

I want to trigger hover only when the mouse will be over parent li not child ul or li. Here is my code which is not working

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

Here is my html code

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

Your help will be much appreciated. Thank you!

Answer 1

If you don't want to stop event propagation, you can compare the element related to the event handler (this) with the element from which the event started bubbling (ev.target). If they are the same, you know that this is the first element hovered by the mouse cursor :

$("#without-if").find("ul,li").hover(function (ev) {
  $(this).toggleClass("hover");
});
$("#with-if").find("ul,li").hover(function (ev) {
  if (this === ev.target) {
    $(this).toggleClass("hover");
  }
});

div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  width: 120px;
}
ul, li {
  list-style: none;
  padding: 30px 0 0 0;
}
ul {
  background: blue;
}
li {
  background: yellow;
}
.hover {
  background: red;
}
#without-if * {
  padding-left: 30px;
}
#with-if * {
  padding-right: 30px;
}

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

<div id="without-if"><ul><li><ul><li></li></ul></li></ul>Without IF</div>
<div>Hover the small yellow square.</div>
<div id="with-if"><ul><li><ul><li></li></ul></li></ul>With IF</div>

Answer 2

You can always prevent propagation of events on child elements to accomplish that:

You can read more about event propagation on MDN, but the general idea is that all events propagate up the DOM tree, so even that occurs on child element will also be triggered on each of its parents.

$('.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>

Cheers. :)

Answer 3

If you don't want your child events to bubble up to the parent, you would need to use stopImmediatePropagation() on the child event, in this case the hover. It might look something like this:

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