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

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/

更改父hover上的子div的字体颜色

3 个答案: