Css sobre el cambio de la libración de fondo Niño

Question

que tiene 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> 

Y esto 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;} 

Todo es agradable y de trabajo, pero lo que quiero hacer es cuando el usuario se sitúa en la lista div elemento que debe cambiar su fondo, y cada div debe cambiar a un Collor diferente, así que necesito algo como:

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

Pero ahora estoy tratando de seleccionar otro li dentro de ese div que no existe, bueno de todos modos espero que entiendas la idea, también aquí está js violín: http://jsfiddle.net/xShBB/

Answer 1

¡Casi lo tienes!

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

El CSS se aplica siempre que el elemento de la derecha más externa del selector (a menos que veamos soporte para el selector de matriz en algún momento en el futuro). Por lo tanto, su div seleccionado debe estar a la derecha del selector, mientras que el li:hover como padre debe estar a la izquierda.

Your fiddle edited.