Cambiare i colori dei caratteri del div child sul parent hover

Question

Ho una domanda e non sono sicuro se sia possibile, ma ho pensato di provare a chiedere.

dire che ho avuto tre div:

<div id="parent_div"> 

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

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

</div> 

Se tutto il testo all'interno parent_div è impostato su nero, come farei rispettivamente child_div_1 e child_div_2 cambiamento font-colore di blu e rosso, quando il div genitore è aleggiò sopra?

Scusate se questo è un po 'di confusione, ma c'è un modo per farlo preferibilmente solo con i CSS?

Answer 1

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

Answer 2

di mira solo gli elementi figlio rilevanti basati sul :hover stato del genitore:

/* 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

Utilizzare il :hover pseudo-classe su l'elemento principale:

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