JSFiddle - React, Tailwind, and code Playground

by Alexey Ukolov

HTML

<div id="target"></div>

CSS

#target {
  margin: 50px;
  width: 100px;
  height: 100px;
  background: red;
}

JavaScript

var $target = document.querySelector('#target');

var timeoutId;

$target.addEventListener('mouseenter', function () {
  clearTimeout(timeoutId);
  
  timeoutId = setTimeout(function () {alert(1);}, 2000);
});

$target.addEventListener('mouseleave', function () {
  clearTimeout(timeoutId);
})