JSFiddle - React, Tailwind, and code Playground

HTML

<div id="messageLog"></div>

<div id="outerDiv" >
    <div id="innerDiv" onmouseout="showMsg('messageLog', 'Inner Div Mouse Out')" >   
    
    </div>
</div>

CSS

#outerDiv {
    width:250px;
    height:200px;
    margin:20px auto;
    padding:5px;
    background-color:#DEDEDE;
}

#innerDiv
{
    width:60%;
    height:60%;
    margin:30px auto;
    padding:5px;
    background-color:#56AFAF;
}

p {margin:0; padding:0}

JavaScript

$ = function(id) {
    return document.getElementById(id);
}

showMsg = function(elem, msg) {
    $(elem).innerText = msg;
}

// Our generic code to handle the on mouse event
isMouseLeave = function(event, parent) {
    // Get the reference to the event object
    if (!event) var e = window.event;

    // Get the target parent (extra code for cross browser compatability)
    e = event.toElement || event.relatedTarget;

    // Now keep traversing all the parents of the current target object to detect if the 
    // object on which the mouse is being moved is child of the main parent element we are looking 
    // for or not
    while (e && e.nodeName && e.nodeName != 'BODY') {
        // if this is a child element, ignore this on mouse out event
        if (e == parent) return false;

        // check the next parent
        e = e.parentNode;
    };

    // If we are here, then this is actually the mouse out leave event, so do what you want to do
    return true;
}

// Generic event binder
bindMouseOut = function(object, handler) {
    object.onmouseout = function(event) {
            
        // Call handler if this is mouse leave even
        if (isMouseLeave(event, object))
            handler();
    };
}
    
bindMouseOut ($('outerDiv'), function(){
       showMsg('messageLog', 'Out Div Mouse Out');
})