鼠标悬停时改变子元素背景的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 元素，无论如何，我希望你能理解我的意思。这里还有 jsfiddle 链接：http://jsfiddle.net/xShBB/

- Linas

---

你是指这个吗：http://jsfiddle.net/xShBB/1/？ - Passerby

Answer 1

你差一点就做到了！

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

CSS总是应用于选择器最右边的元素（除非将来支持父级选择器）。 因此，您选择的div必须在选择器的右侧，而其父级为必须在其左侧。 您编辑过的演示。

- Sirko

---

哇，我感觉自己太蠢了，没能自己想出来。不管怎样，谢谢你。 - Linas