JSFiddle - React, Tailwind, and code Playground

HTML

<div id="foo"></div>
<div id="bar"></div>

CSS

#foo {
  width: 200px;
  height: 200px;
  background-color:red;
  position: absolute;
  top:10px;
  left:15px;
}
#foo:hover {
  background-color: green;
}
#bar {
  width: 200px;
  height: 200px;
  background-color:blue;
  position: absolute;
  top:100px;
  left:100px;
  
}

JavaScript

var bar = document.getElementById("bar");
var activated = false;
bar.onmouseenter = function () {
    if (!activated) {
        setTimeout(function () {
        		bar.parentElement.removeChild(bar);
        }, 1000)
    }
}