JSFiddle - React, Tailwind, and code Playground

HTML

<div id="btn1">button on hover </div>
<div id="btn2">button on mouse enter </div>

CSS

#btn1{
    background-color:#44ff44;
}
#btn2{
    background-color:#4444ff;
}

JavaScript

var delay=1000, setTimeoutConst;

$(document).on("mouseenter", "#btn1", function() {
     console.log("MOUSEENTER");
     setTimeoutConst = setTimeout(function(){
               $("#btn1").css("background-color","#ff0000");
      }, delay);
});
$(document).on("mouseleave", "#btn1", function() {
	clearTimeout(setTimeoutConst );
});