Как запретить mouseEnter у родителя при наведении мыши на вложенный элемент?

Question

[photosho]

Как запретить mouseEnter у родителя при наведении мыши на вложенный элемент? Вложенный элемент визуально находится вне родителя. Функции "stopPropagation()" и "stopImmediatePropagation()" не срабатывают. Вот пример:

https://codepen.io/photosho/pen/jOzeovx

Answer 1

[Антон]

события всплывают от дочерних элементов к родительским, поэтому stopPropagation надо делать в обработчике mousenter дочернего элемента.

$("li").mouseenter(function(e){
    e.stopPropagation();
  })

Answer 2

[FKV]

$(document).ready(function() {
  $('div')
    .mouseenter(function(event) {
      if (event.target.tagName != 'DIV') return;
      $(this).addClass('entered');
    })
    .mouseleave(function(event) {
      if (event.target.tagName != 'DIV') return;
      $(this).removeClass('entered');
      
    });
});

Почитайте https://learn.javascript.ru/event-delegation