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

Posted 2023-03-06

【中文标题】在父悬停时更改子颜色的更好解决方案

【英文标题】：Better solution for changing children color on parent hover

【发布时间】：2011-10-31 15:12:30

【问题描述】：

是否有更好的单行跨浏览器解决方案来通过 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;

【参考方案1】：

你自己的...

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

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

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

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

【讨论】：

这很简单。是的，我会说这是最简单的解决方案。不可能在同一个选择中同时匹配一个元素及其子元素（例如div:hover && *），因此div:hover, div:hover * 既符合语义又简单。让男人接受！

完美解决方案