JSFiddle - React, Tailwind, and code Playground

by Diana Lemen

HTML

<div id="only_blue">
        <p> if you hover over this box the green boxes disappear</p>
    </div>
    <div id="only_green">
        <p> if you hover over this box the blue boxes disappear</p>
    </div>

    <div class="box1 green">
    </div>
    <div class="box1 green">
    </div>
    <div class="box2 blue">
    </div>
    <div class="box2 blue">
    </div>
    <div class="box1 green">
    </div>

CSS

#only_blue {
width:50%;
float:left;
background-color:black
color:blue;
}

#only_green {
width:50%;
float:right;
background-color:white;
color:green;
}

.box1{
height:100px;
width:20%;
float:left;
}

.box2{
height:100px;
width:20%;
float:left;
}

.blue{
background-color:blue;
}
.green{
background-color:green;
}

#only_blue:hover ~ .box1 {
    display: none;
}

#only_green:hover ~ .box2 {
    display: none;
}