JSFiddle - React, Tailwind, and code Playground

by syedgakbar

HTML

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

<div id="outerDiv" onmouseout="showMsg('messageLog', 'Out Div Mouse Out')" >
    <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

leaveCount=0
    
$ = function(id)
{
    return document.getElementById(id);
}
   
showMsg = function(elem, msg)
{
    $(elem).innerText = msg;    
}