JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
<div id="div1" onmouseover="alert('Red Div moused over');"></div>
<div id="div2"></div>
<div id="div3"></div>

CSS

#container {
    position:absolute;
    width:100px;
    height:100px;
    border:2px solid #0f0;
    overflow:hidden;
    z-index:2;
}
#container:hover{border-color:#f00;}
#container div{z-index:1;}
#div1 {
    position:absolute;
    width:100px;
    height:100px;
    background-color:red;
}
#div2 {
    position:absolute;
    width:100px;
    height:100px;
    background-color:green;
    left:25px;
    top:25px;
}
#div3 {
    position:absolute;
    width:100px;
    height:100px;
    background-color:blue;
    left:50px;
    top:50px;
}