Css sui cambiamenti hover bambino sfondo

Question

Ho un menù:

<ul class="menu"> 
    <li><div class="home"></div> Home</li> 
    <li><div class="forum"></div> Forum</li> 
    <li><div class="music"></div> Music</li> 
</ul> 

E questo css:

.menu{ 
    list-style:none; 
    width:100px; 
    border:1px solid #ccc; 
    padding:0px; 
    margin:0px; 
} 

.menu li{ 
    height:20px; 
    margin-top:5px; 
    padding-left:10px; 
} 

.menu li div{ 
    display:inline-block; 
    width:10px; 
    height:10px; 
} 

.menu li:hover{ 
    background-color:green; 
} 

.home{background-color:black;} 
.forum{background-color:red;} 
.music{background-color:yellow;} 

E 'tutto bello e di lavoro, ma quello che voglio fare è quando l'utente si posiziona sulla lista elemento che div dovrebbe cambiare il suo sfondo, e ogni div dovrebbe cambiare a un Collor diverso, quindi ho bisogno di qualcosa di simile a:

.home li:hover{ 
    background-color:brown; 
} 

Ma ora im solo cercando di seleziona un altro li dentro quel div che non esiste, beh spero comunque che tu abbia capito l'idea, anche qui js fiddle: http://jsfiddle.net/xShBB/

Answer 1

Hai quasi avuto!

li:hover .home { 
    background-color:brown; 
} 

Il CSS è sempre applicato l'elemento a destra più esterna del selettore (a meno che non si vede il supporto per il selettore di genitore in futuro). Quindi il div selezionato deve trovarsi a destra del selettore, mentre lo li:hover come genitore deve essere alla sua sinistra.

Your fiddle edited.