JSFiddle - React, Tailwind, and code Playground

HTML

<div class="div1"><div class="div2"></div></div>

CSS

.div1{
    width:200px;
    height:200px;
    background-color:red;
    position: relative;
    z-index: 1;
}

.div2{
    width:50px;
    height:50px;
    background-color:blue;
}

.div1:hover{
    background:yellow;
}
.div2:hover{
    background:green;
}

.div2:hover:before {
   content: "";
   background: red;
   position: absolute;
   z-index: -1;
   pointer-events: none;
   top: 0; left: 0; right: 0; bottom: 0;
}