JSFiddle - React, Tailwind, and code Playground

HTML

<div class="outer">
  <div class="inner">
    <div class="innermost">
    </div>
  </div>
</div>

CSS

.outer {
  outline: 1px solid green;
  padding: 20px;
}

.inner {
  outline: 1px solid red;
  height: 50px;
  padding: 10px;
}

.innermost {
  outline: 1px solid orange;
  height: 10px;
}

.hover {
  outline: 1px solid yellow;
}

JavaScript

$('.outer, .inner, .innermost').on('mouseenter', function(e){

  $(this).addClass('hover');
    e.stopPropagation();
    $(this).parent().removeClass('hover');

}).on('mouseleave', function(e){

  $(this).removeClass('hover');

});