JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

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

CSS

div { width: 50px; height: 50px; float: left; border: 1px solid #999; }
span { display: none; width: 100%; height: 100%; float: left; background: red;}

JavaScript

$('div').on("mouseenter mouseleave", function( e ) {

  var eType = e.type,
      timeout,
      timeoutSpeed = eType === 'mouseenter' ? 500 : 1000;
  
  timeout = setTimeout(function() { 
    
    console.log('test')
  
    if ( eType === 'mouseenter' ) {
      clearTimeout( timeout );

      $('span').show();

    }
    else {
      clearTimeout( timeout );

      $('span').hide();

    }
  
  }, timeoutSpeed);

});