html - Change color of parent li > span when mouse hover on li child ul -

is possible change color of parent li span when mouse hover on li child ul. (only 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; } 

i tried:

.menu > li > > span + ul:hover {   color:red; } 

fiddle : http://jsfiddle.net/xk4ph/1/

this can done using css since ul child of li... working jsfiddle

use following selector:

.menu > li:hover > > span 

use :hover on li instead of a