JSFiddle - React, Tailwind, and code Playground

HTML

<div id='d'>
    <div id='d1'></div>
    <div id='d2'></div>
    <div id='dN'></div>
</div>

CSS

div:hover div {
    visibility: hidden;
}

div:hover div:hover {
    visibility: visible;
}

#d1 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
}

#d2 {
    float: left;
    width: 100px;
    height: 100px;
    background-color: green;
}
			
#dN {
    float: left;
    width: 100px;
    height: 100px;
    background-color: yellow;
}