当父元素悬停时更改其子元素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就能实现的方法？

- Al Hennessey

Answer 1

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

- Denys Séguret

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 Fiddle demo.

- David Thomas

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/

- Guffa