我试图在悬停时更改根的所有子元素的背景颜色属性。我尝试了以下方法:
.app_setting *:hover { background-color: yellow; }
*:hover { background-color: yellow; }
html *:hover {background-color: yellow; }
<html class="parent">
</html>
.parent *:hover {background-color: yellow; }
我也试过这些链接:
CSS for hover that includes all child elements
CSS :hover to affect all child divs
以上似乎只影响和改变 <a> 的背景颜色标签。除了使用 javascript 或将每个元素分配给特定类之外，他们还有另一种使用 CSS 来实现此目的的方法吗？
编辑:
Fiddle 已删除，因为这是家庭作业，我不想共享代码，但是，
fiddle 确实改变了子元素的背景颜色属性
body *:hover {
background-color: yellow;
}
正如预期的那样。 但在 HTML 文档中打开时，背景颜色仅应用于 <a>标签。我在 Firefox 和 Chrome 中尝试过同样的效果。
上面的问题很简单，只需要添加一个有效的文档类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
最佳答案
我相信你正在寻找的是类似的东西
.rootclass:hover *{
background-color: green;
}
如果您只想做直接后代，请确保使用 > 而不是空格，就像这样。
.rootclass:hover > *
当您将鼠标悬停在父 div 的任何部分上时，该 div 的每个子元素的背景都会发生变化。
关于html - CSS递归悬停在所有子元素上，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24495980/