css - 在 parent 悬停时改变 child 颜色的更好解决方案

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/