JSFiddle - React, Tailwind, and code Playground

HTML

<div class="test test1">hover over me</div>
<div class="test test1-h"></div>

<br><br>
    
<div class="test test2">
    hover over me
    <div class="test test2-h"></div>
</div>
<br><br>
    
 <div class="test test3">
     hover over me
     <div>
         <div class="test test3-h"></div>
     </div>
 </div>

CSS

.test {
    padding: 30px;
    background: red;
    display: inline-block;
}

.test .test {
    background: blue;
}
.test1:hover+div.test1-h {
    display: none;
}
.test3:hover .test3-h {
    background: tomato;
}

.test2:hover > .test2-h {
    background: green;
}