Zmienianie kolorów czcionki div użytkownika na hover nadrzędnego

Question

Mam pytanie i nie jestem pewien, czy to możliwe, ale pomyślałem, że spróbuję zapytać.

Say miałem trzy div:

<div id="parent_div"> 

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

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

</div> 

Jeżeli cały tekst wewnątrz parent_div jest ustawiony na czarny, jak bym dokonać child_div_1 i child_div_2 zmiany font-kolor niebieski i czerwony, odpowiednio, gdy div rodzic jest unosił się nad?

Przepraszam, jeśli to trochę zagmatwane, ale czy istnieje sposób, aby to zrobić, najlepiej tylko z CSS?

Answer 1

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

Answer 2

Wystarczy kierować odpowiednie elementy podrzędne w oparciu o stan rodzica :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

pomocą pseudo-klasę :hover na elementu nadrzędnego:

Demo: http://jsfiddle.net/Guffa/M3WsW/