Изменение цвета шрифта дочернего div в родительском паре

У меня есть вопрос, и я не уверен, что это возможно, но я подумал, что попробую спросить.

Скажем, у меня было три div:

<div id="parent_div">

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

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

</div>

Если весь текст внутри parent_div установлен на черный, как бы сделать, чтобы child_div_1 и child_div_2 менял шрифт-цвет на синий и красный соответственно, когда родительский div зависает над?

Извините, если это немного запутанно, но есть ли способ сделать это предпочтительно только с помощью CSS?

Ответ 1

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

Ответ 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.

Ответ 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/