html - 在父悬停时更改子 div 的字体颜色

Question

我有一个问题，我不确定是否可能，但我想我会尝试问。

假设我有三个 div：

<div id="parent_div">

   <div id="child_div_1">Blue</div>

   <div id="child_div_2">Red</div>

</div>

如果 parent_div 中的所有文本都设置为黑色，当父 div 悬停在上方时，我将如何将字体颜色分别设置为蓝色和child_div_1红色？child_div_2

抱歉，如果这有点令人困惑，但是有没有办法最好只使用 CSS 来做到这一点？

Answer 1

#parent_div:hover #child_div_1 {
   color: blue;
}
#parent_div:hover #child_div_2 {
   color: red;
}

Answer 2

只需根据:hover父级的状态定位相关的子元素：

/* defaults */
#parent_div div {
    color: #000; /* or whatever... */
}

/* hover rules */

#parent_div:hover #child_div_1 {
    color: blue;
}
#parent_div:hover #child_div_2 {
    color: red;
}

JS 小提琴演示。

Answer 3

在父元素上使用:hover伪类：

#parent_div { color: black; }

#parent_div:hover #child_div_1 { color: blue; }
#parent_div:hover #child_div_2 { color: red; }

演示：http: //jsfiddle.net/Guffa/M3WsW/