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
Comments
Post a Comment