当鼠标悬停在 li 子 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;
}
fiddle :http://jsfiddle.net/xk4Ph/1/
最佳答案
这只能使用 CSS 来完成,因为 ul
是 li
的子元素... working jsFiddle
使用以下选择器:
.menu > li:hover > a > span
在 li
上使用 :hover
而不是 a
关于html - 当鼠标悬停在 li 子 ul 上时更改父 li > span 的颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18101723/