JQuery - Keep the same event [mouseenter] in a nested element

Question

I'm trying to create an hover event in an element with a nested a icon.

The problem is when the cursor touch the <i class="material-icons fav icons lov-icon lov-icon-color"> favorite</i> element because that tigger the event mouseout

How to keep the same event in a nested element ?

$(".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/

Answer 1

Use mouseenter and mouseleave events instead.

mouseleave and mouseout are similar but differ in that mouseleave does not bubble and mouseout does. This means that mouseleave is fired when the pointer has exited the element and all of its descendants, whereas mouseout is fired when the pointer leaves the element or leaves one of the element's descendants (even if the pointer is still within the element).

 const applyMouseEnterStlye = (button, icon) => { button.removeClass('fav-btn'); button.addClass('fav-btn-selected'); icon.removeClass('lov-icon-color'); icon.addClass('lov-icon-color-selected'); }; const applyMouseLeaveStlye = (button, icon) => { button.removeClass('fav-btn-selected'); button.addClass('fav-btn'); icon.removeClass('lov-icon-color-selected'); icon.addClass('lov-icon-color'); }; const toggleStyles = event => { const button = $(event.target); const icon = $(button.find('i')); switch (event.type) { case 'mouseenter': applyMouseEnterStlye(button, icon); break; case 'mouseleave': applyMouseLeaveStlye(button, icon); break; } } const circleEl = document.querySelector('.circle'); circleEl.addEventListener('mouseenter', toggleStyles); circleEl.addEventListener('mouseleave', toggleStyles); 

 .circle { display: inline-block; text-align: center; width: 70px; height: 70px; -moz-border-radius: 50% !important; -webkit-border-radius: 50% !important; border-radius: 50%; -webkit-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); } .circle>.icons { position: relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */ } .fav-btn { background-color: #FFFFFF; } .msg-btn { background-color: #FFFFFF; } .lov-icon { font-size: 25px; } .msg-icon { font-size: 25px; } .lov-icon-color { color: red; } .msg-icon-color { color: green; } .fav-btn-selected { background-color: #b61825; } .msg-btn-selected { background-color: green; } .lov-icon-color-selected { color: #FFFFFF; } .msg-icon-color-selected { color: #FFFFFF; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <a href=""> <div class="circle fav fav-btn m-2"> <i class="material-icons fav icons lov-icon lov-icon-color">favorite</i> </div> </a> 

Answer 2

Since you're using jQuery, you can also use hover and toggleClass to do so.

Here's a demo:

 $(".fav-btn").hover((event => { let favButton = $(event.currentTarget); let favIcon = $(event.currentTarget.children[0]); favButton.toggleClass('fav-btn fav-btn-selected'); favIcon.toggleClass('lov-icon-color lov-icon-color-selected'); })); 

 .circle { display: inline-block; text-align: center; width: 70px; height: 70px; -moz-border-radius: 50% !important; -webkit-border-radius: 50% !important; border-radius: 50%; -webkit-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); -moz-box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); box-shadow: -2px 3px 10px 0px rgba(0, 0, 0, 0.75); } .circle>.icons { position: relative; top: calc(50% - 10px); /* 50% - 3/4 of icon height */ } .fav-btn { background-color: #FFFFFF; } .msg-btn { background-color: #FFFFFF; } .lov-icon { font-size: 25px; } .msg-icon { font-size: 25px; } .lov-icon-color { color: red; } .msg-icon-color { color: green; } .fav-btn-selected { background-color: #b61825; } .msg-btn-selected { background-color: green; } .lov-icon-color-selected { color: #FFFFFF; } .msg-icon-color-selected { color: #FFFFFF; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <a href=""> <div class="circle fav fav-btn m-2"> <i class="material-icons fav icons lov-icon lov-icon-color">favorite</i> </div> </a>