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 中选择另一个不存在的 li，无论如何我希望你明白这个想法，这里还有 js fiddle:http://jsfiddle.net/xShBB/

Answer 1

你几乎成功了!

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

CSS 始终应用于选择器最右侧的元素(除非我们将来某个时候看到对父选择器的支持)。因此，您选择的 div 必须位于选择器的右侧，而作为其父项的 li:hover 必须位于其左侧。

Your fiddle edited .