JSFiddle - React, Tailwind, and code Playground

by Simplybj

HTML

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

  </div>
</div>

<ul class="mousemovement">

</ul>

CSS

.outer {
  background-color: #aeaeae;
  height: 200px;
  width: 200px;
  float: left;
}

.inner {
  margin: 50px;
  background-color: #ccc;
  height: 100px;
  width: 100px;
  float: left;
}

.activeHover {
  background-color: green;
}

JavaScript

$('div').hover(
   function() {
     $('div').removeClass('activeHover');
     $(this).addClass('activeHover');
     $('.mousemovement').append('<li>MouseEnter ' + $(this).attr('class') + '</li>');

   },
   function() {
     $(this).removeClass('activeHover');
     $('.mousemovement').append('<li>MouseOut' + $(this).attr('class ') + '< /li>');
   }
 );