JSFiddle - React, Tailwind, and code Playground

HTML

<div id="div1"></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;
}

JavaScript

var $div1 =  $('#div1'),
theoff = $div1.offset(),
 thewidth = $div1.width(),
 theheight =  $div1.height();


   $(document).mousemove(function(e){       
       var x = e.pageX, y = e.pageY;
       if(x > theoff.left && x < (thewidth + theoff.left) 
          && y > theoff.top && y < (theheight + theoff.top)){
           $('#div1').css({'background-color':'green'});
           alert('redbox!');
       }
       else{$('#div1').css({'background-color':'red'});}
       
       
   });