JSFiddle - React, Tailwind, and code Playground

HTML

<body onload="loadListener();">
    <div id="outer">
        <div id="top"></div>
        <div id="bottom"></div>
    </div>
</body>

CSS

div > div {
    height: 128px;
    width: 128px;
}
#top {
    background-color: red;
}
#bottom {
    background-color: blue;
}

JavaScript

function loadListener() {
    document.getElementById("top").addEventListener("mouseover", overListener);
    document.getElementById("top").addEventListener("mouseout", outListener);
    document.getElementById("bottom").addEventListener("mouseover", overListener);
    document.getElementById("bottom").addEventListener("mouseout", outListener);
}

function outListener(event) {
    console.log("exited " + event.target.id + " for " + event.relatedTarget.id);
}

function overListener(event) {
    console.log("entered " + event.target.id + " from " + event.relatedTarget.id);
}