html - 子 ul の上にマウスを置くと、親 li > スパンの色が変わります

Question

マウスを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/

Answer 1

li にクラスを追加して <li class="test"><a href="#"><i class="icon-windows" ></i> list-1</a></li> 、css を編集できます。 .test a:hover{ color: #000000; }