JSFiddle - React, Tailwind, and code Playground

by bgrins

HTML

<div id="one">
    One
</div>
<div id="two">
    Two
</div>

CSS

#one {
    background: #dfd;
    position:absolute;
    top: 10px;
    left: 100px;
    width: 100px;
    height: 100px;
}

#two.over {
background: red;
}
#two {
    background: #fdd;
}

JavaScript

var isOverPanel = false;
document.querySelector("#one").addEventListener("mouseenter", function() {
    isOverPanel = true;
});
document.querySelector("#one").addEventListener("mouseleave", function() {
    isOverPanel = false;
    hide();
});


var isOverNode = false;
document.querySelector("#two").addEventListener("mouseenter", function() {
    isOverNode = true;
   this.classList.add("over"); 
});
document.querySelector("#two").addEventListener("mouseleave", function() {
    isOverNode = false;
    hide();
})

function hide() {
    var node = document.querySelector("#two");
    setTimeout(function() {
        if (!isOverPanel && !isOverNode) {
            node.classList.remove("over");
        }
    }, 1);
}