JSFiddle - React, Tailwind, and code Playground

by Ahmad Baktash Hayeri

HTML

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

CSS

.outer{
    background: #e3e3e3;
    width:100%;
    height: 300px;
    position:relative;
}

.inner{
    background: #f99;
    width:60px;
    height: 35px;
    margin-right: auto;
    margin-left:auto;
    top: 4rem;
    position:relative;
    display:block;
}
.active{
    background: red;
}
}

JavaScript

$(function(){
  $(document).on('mouseover', 'div', function(e){
     
     console.log($(e.target).attr('class'));
      if(e.target === this){
          $(this).parents('div').each(function(){
             $(this).removeClass('active');
          });
          $(this).addClass('active');
      }
  }).on('mouseleave', 'div', function(){
      $(this).removeClass('active');
  });
});