.parent .child{
background: rebeccaPurple;
}
.parent:hover .child{
background: tomato;
}
.parent:hover .child:not(:hover){
background: rebeccaPurple;
opacity: .5;
}
I came with this bad bad title.. I couldn't find a better one..
Basically, this snippet shows you how to isolate a child when it's hovered, and how to modify all of it's brothers elements.
<br/>
So, when the .parent class is hover, all the non-hovered children will have a different style, than the hovered .child.
Demo : http://codepen.io/LukyVj/pen/xbWGgv
Basically, this snippet shows you how to isolate a child when it's hovered, and how to modify all of it's brothers elements.
<br/>
So, when the .parent class is hover, all the non-hovered children will have a different style, than the hovered .child.
Demo : http://codepen.io/LukyVj/pen/xbWGgv
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.