如何基于父元素选择器条件设置多个子元素的样式

Question

设置多个子元素的样式

我在DOM中使用id为#parentDiv的div。此div有2个元素<span>和<div>。

每当我将鼠标悬停在#parentDiv上时，我想设置内部范围和内部div标记的样式。我如何以传统的CSS方式实现这一目标？

约束 - 这可以用传统的css方式完成。

Answer 1

如果没有看到您的HTML代码，很难确切知道哪些内容有效，但这应该是：

#parentDiv:hover div {

}

#parentDiv:hover span {

}

有了这个，当div悬停在上面时，子span和div将具有你在应用中添加的任何样式。

例如：

#parentDiv:hover div {
color: blue;
}

#parentDiv:hover span {
color: red;
}

<div id="parentDiv">
<div>Div Element</div>
<span> Span Element</span>
</div>

Answer 2

尝试使用以下语法：

PARENT_SELECTOR:hover CHILD_SELECTOR {
    /* your css goes here */
}

例如，

#parent:hover #child {
    background: yellow;
}