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/