JSFiddle - React, Tailwind, and code Playground

by prozoroff

HTML

<div id="parent">parent
    <div id="child2"> <div id="child">child</div></div>
</div>

CSS

#parent{
    position:absolute;
    top:50px;
    left:10px;
    width:90px;
    height:90px;
    background-color:red;
}
#child
{
    position:absolute;
    bottom:0px;
    width:30px;
    height:30px;
    background-color:cyan;
}

#child2
{
    position:absolute;
    bottom:0px;
    width:50px;
    height:50px;
    background-color:gre;
}

JavaScript

function onMouseOut(event) {
        e = event.toElement || event.relatedTarget;
    if (e.parentNode == this || 
                           e == this) {
        return;
    }
    alert('MouseOut');
    // handle mouse event here!
};


    document.getElementById("parent").addEventListener('mouseout',onMouseOut,true);