Css auf schweben Änderung Kind Hintergrund

Question

Ich habe ein 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> 

Und diese 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;} 

Es ist alles schön und arbeiten, aber was ich tun möchte, ist, wenn der Benutzer auf die Liste schwebt Artikel, dass div sollte es Hintergrund ändern, und jedes div sollte zu einem anderen collor ändern, so brauche ich so etwas wie:

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

Aber jetzt im Versuch nur zu Wählen Sie eine andere li innerhalb dieser div, die nicht existiert, gut, trotzdem hoffe ich, dass Sie die Idee bekommen, auch hier ist js fiddle: http://jsfiddle.net/xShBB/

Answer 1

Sie hatten es fast!

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

Das CSS ist mit dem Element auf der äußersten rechten Seite der Wähler immer angewendet (es sei denn, wir Unterstützung für die Eltern Wähler irgendwann in der Zukunft). Das ausgewählte div muss also auf der rechten Seite des Selektors sein, während das li:hover als übergeordnetes Element auf der linken Seite sein muss.

Your fiddle edited.