CODEWITHSUNDEEP
csscolorshover
Shara
Shara

Reputation: 811

Better solution for changing children color on parent hover

Is there very better one line crossbrowser solution to change children text colour via css?
Need to make all text red on hover div

html:

<div><span class="gray">I'm a lion!</span><span>Arrrrr!!!</span></div>


css:

div {color:black};
.gray {color:gray;}
div:hover {color:red;}


I thought only this

div:hover, div:hover .gray {color:red;}

Upvotes: 14

Views: 24343

Answers (1)

xec
xec

Reputation: 18024

your own...

div:hover, div:hover .gray {color:red;}

...is as good a solution as any, really. If you want to match other classes/elements as well you can use a star;

div:hover, div:hover * { color:red; }

demo at http://jsfiddle.net/h5BaU/

Upvotes: 34

Related Questions