3

当鼠标悬停在 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/

4

2 回答 2

9

这只能使用 CSS 来完成,因为它ulli... working jsFiddle的孩子

使用以下选择器:

.menu > li:hover > a > span

:hoverli而不是a

于 2013-08-07T11:08:17.527 回答
0

您可以向您的 li 添加一个类 <li class="test"><a href="#"><i class="icon-windows" ></i> list-1</a></li> 并编辑您的 css : .test a:hover{ color: #000000; }

于 2013-08-07T15:26:37.147 回答