在父悬停时更改子颜色的更好解决方案

Question

是否有更好的单行跨浏览器解决方案来通过 css 更改子文本颜色？
需要在悬停 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;}

我以为只有这个

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

Answer 1

你自己的...

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

...确实是一个很好的解决方案。如果您也想匹配其他类/元素，可以使用星号；

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

http://jsfiddle.net/h5BaU/ 上的演示