Css na zmiany unosić dziecka tle

Question

Mam menu:

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

i to 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;} 

To wszystko ładnie i działa, ale to, co chcę zrobić jest, gdy użytkownik najedzie na liście element, który powinien zmienić div to tło, a każdy div powinien zmienić na inną collor, więc muszę coś takiego:

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

Ale teraz im tylko próbuje wybierz inny li w tym div, który nie istnieje, cóż, w każdym razie mam nadzieję, że wpadniesz na pomysł, również tutaj jest skrzypce js: http://jsfiddle.net/xShBB/

Answer 1

Prawie już go masz!

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

CSS jest zawsze stosowana do elementu na zewnętrznej prawej stronie wybieraka (chyba widzimy wsparcie dla selektora dominującej kiedyś w przyszłości). Zatem wybrany element div musi znajdować się po prawej stronie selektora, podczas gdy li:hover jako jego rodzic musi znajdować się po lewej stronie.

Your fiddle edited.