JQuery - 在嵌套元素中保留相同的事件 [mouseenter]

Question

我正在尝试在带有嵌套图标的元素中创建悬停事件。

问题是当光标触摸<i class="material-icons fav icons lov-icon lov-icon-color"> favorite</i>元素时，因为这会触发事件mouseout

如何在嵌套元素中保持相同的事件？

$(".fav-btn").mouseout((event) => {

  let favButton = $(event.currentTarget);

  let favIcon = $(event.currentTarget.children[0]);

  console.log(favButton);

  if (favButton.hasClass('fav-btn-selected') && favIcon.hasClass('lov-icon-color-selected')) {

    favButton.removeClass('fav-btn-selected');

    favIcon.removeClass('lov-icon-color-selected');

    favButton.addClass('fav-btn');

    favIcon.addClass('lov-icon-color');

  }

});

$(".fav-btn").mouseenter((event) => {

  let favButton = $(event.currentTarget);

  let favIcon = $(event.currentTarget.children[0]);

  console.log(favIcon);

  if (favButton.hasClass('fav-btn') && favIcon.hasClass('lov-icon-color')) {

    favButton.removeClass('fav-btn');

    favIcon.removeClass('lov-icon-color');

    favButton.addClass('fav-btn-selected');

    favIcon.addClass('lov-icon-color-selected');

  }

});

https://jsfiddle.net/4mLnckaw/3/