hide show using CSS only

by karthick Chandran

HTML

<div class="main-red"></div>
<div class="main-black"></div>
<div class="color red">Red</div>
<div class="color black">black</div>

CSS

.main-red{
    background-color : red;
    height:100px;
    width:100px;
}
.main-black{
    background-color : black;
    height:100px;
    width:100px;
}
.color{
    display: none;
    font-size:2em;
}


.main-red:hover ~ .red{
    display:block;
}

.main-black:hover ~ .black{
    display:block;
}