Question

我试图在悬停时更改root的所有子元素的background-color属性。我尝试过以下方法：

.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吗？

编辑：

小提琴被删除，因为这是一个家庭作业，我不想分享代码，但

小提琴DOES用

改变子元素background-color属性

body *:hover {
    background-color: yellow;

}

正如预期的那样。 但是当在HTML文档中打开时，背景颜色仅适用于<a>标记。 我在Firefox和Chrome中尝试过相同的效果。

上述问题很简单，只需添加有效的doctype即可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Answer 1

将鼠标悬停在页面上的每个元素上。

Fiddle

body *:hover{
    border:1px solid red;
}

修改

正如评论中所指出的，看起来真正寻找的是如何在悬停时对子元素应用更改。虽然上面的代码在技术上是正确的（将对身体标签的所有孩子应用红色边框，我认为Smeegs在下面有一个更合适的答案：

来自Smeegs

.rootclass:hover *{ background-color: green; }

.rootclass是父类，您希望所有儿童在悬停时受到影响。

https://stackoverflow.com/a/24496116/1174118

Answer 2

我相信你所寻找的是像

.rootclass:hover *{
    background-color: green;
}

如果您只想做直接后代，请确保使用>而不是空格，如此。

.rootclass:hover > *

Here is a fiddle

当您将鼠标悬停在父div的任何部分上时，该div的每个子元素的背景都会发生变化。

Answer 3

如果要为每个子元素设置:hover效果，可以使用以下语法：

.app_setting :hover {
    background-color: yellow;
}

如果您希望任何级别的每个孩子都具有悬停效果。

或者您可以使用：

.app_setting > :hover {
    background-color: yellow;
}

如果您只想让直接孩子产生效果。

Answer 4

您可以使用：

.app_settings:hover *{ }

正如Smeegs所指出的，或者如果要为不同的子项设置不同的背景，请使用以下语法：

.app_settings:hover .childclass1{}

.app_settings:hover #child2id{}

请注意，如果您的元素已经具有背景颜色集，则可能必须使用！important

CSS在所有子元素上以递归方式悬停

4 个答案: