当鼠标悬停在李子ul上时，改变父li的颜色> span

Question

当鼠标悬停在李子ul上时，是否有可能改变父母李斯的颜色？(只有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/

Answer 1

这只能使用CSS，因为ul是li. 工作jsFiddle的子级

使用下列选择器：

.menu > li:hover > a > span

在li上使用li而不是a

Answer 2

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