selectors for hover
<div className="ppp">
<div className="ccc">a</div>
<div className="ccc">d</div>
<div className="ccc">r</div>
</div>
//self
div.ccc:hover{
background-color: #00f;
}
//not self
div.ccc:not(:hover){
background-color: #00f;
}
//self and pre
div.ppp:hover div.ccc:not(:hover ~ div){
background-color: #00f;
}
//self and next
div.ccc:hover ~div , div.ccc:hover {
background-color: #00f;
}
//just pre
div.ppp:hover .ccc:not(:hover):not(:hover ~ div){
background-color: #00f;
}
//just next
div.ccc:hover ~ div{
background-color: #00f;
}