JSFiddle - React, Tailwind, and code Playground

by Simplybj

HTML

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

    </div>
  </div>
</div>

<ul class="mousemovement">

</ul>

CSS

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

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

.inner2 {
  margin: 5px 0px;
  background-color: #9c9;
  height: 60px;
  width: 60px;
  float: left;
}

.activeHover {
  background-color: green;
}

JavaScript

var count = 0;
$('div').on({
  mousemove: function(event) {

    var hover = $(this).is(":hover");
    if (hover) {
      
      $('.mousemovement').append('<li>' + hover + '</li>');

      if (count > 10) {
        $('.mousemovement').html('');
        count = 0;
      }
    }
    count++;
  }
});