当鼠标悬停在 li child ul 上时,是否可以更改父 li span 的颜色。(仅 CSS)
html:
<ul class="menu">
<li><a href="#"><i class="icon-list"></i> <span>Home</span></a></li>
<li><a href="#"><i class="icon-th"></i> <span>test-menu</span></a>
<ul>
<li><a href="#"><i class="icon-windows"></i> list-1</a></li>
<li><a href="#"><i class="icon-windows"></i> list-3</a></li>
<li><a href="#"><i class="icon-windows"></i> list-2</a></li>
</ul>
</li>
</ul>
CSS:
.menu > li > a:hover > span {
color:red;
}
我试过:
.menu > li > a > span + ul:hover {
color:red;
}
小提琴:http: //jsfiddle.net/xk4Ph/1/