的CSS懸停改變孩子的背景

Question

我有一個菜單：

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

而這個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;} 

這一切都很好，工作，但我想要做的是，當用戶將鼠標懸停在列表項目該div應該改變它的背景，每一個DIV應更改爲不同的科洛爾，所以我需要這樣的：

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

但我現在只是想選擇另一個裏面那個div裏面不存在，好吧，不管怎麼說，我希望你明白了，這裏也是js小提琴：http://jsfiddle.net/xShBB/

Answer 1

你幾乎已經擁有它了！

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

CSS始終應用於選擇器最外側右側的元素（除非我們將來有時會看到對父選擇器的支持）。因此，您選擇的div必須位於選擇器的右側，而作爲其父代的li:hover必須位於其左側。

Your fiddle edited。