JSFiddle - React, Tailwind, and code Playground
HTML
<div class="h"></div>
<div class="ts">
<div class="t"></div>
<div class="nt"></div>
<div class="nt"></div> <br>
<div class="nt"></div>
<div class="nt"></div>
<div class="t"></div> <br>
<div class="t"></div>
<div class="t"></div>
<div class="nt"></div>
CSS
.t {
height:50px;
width:50px;
background:#000;
display:inline-block;
}
/* .h:hover + .ts .t {
display: none;
} */
.hide{
display: none;
}
.nt {
height:50px;
width:50px;
background:blue;
display:inline-block;
}
.h {
height:50px;
width:50px;
background:red;
margin:0 0 5px 0;
top:250px;
position:relative;
}
JavaScript
$(document).ready(function() {
$('.h').hover(function() {
$('.ts .t').toggleClass('hide');
});
});