Is it possible to change color of parent li span when mouse hover on li child ul. (Only CSS)
当鼠标悬停在li子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;
}
I tried:
.menu > li > a > span + ul:hover {
color:red;
}
Fiddle : http://jsfiddle.net/xk4Ph/1/
小提琴:http://jsfiddle.net/xk4Ph/1/
2 个解决方案
#1
8
This can be done using CSS only since the ul
is a child of the li
... working jsFiddle
这可以使用CSS来完成,因为ul是li ... working jsFiddle的孩子
Use the following selector:
使用以下选择器:
.menu > li:hover > a > span
use :hover
on the li
instead of the a
使用:将鼠标悬停在li而不是a上
#2
0
You can add a class to your li <li class="test"><a href="#"><i class="icon-windows" ></i> list-1</a></li>
and edit your css : .test a:hover{ color: #000000; }
您可以在li
list-1中添加一个班级,编辑你的css:.test a:hover {color:#000000; }
#1
8
This can be done using CSS only since the ul
is a child of the li
... working jsFiddle
这可以使用CSS来完成,因为ul是li ... working jsFiddle的孩子
Use the following selector:
使用以下选择器:
.menu > li:hover > a > span
use :hover
on the li
instead of the a
使用:将鼠标悬停在li而不是a上
#2
0
You can add a class to your li <li class="test"><a href="#"><i class="icon-windows" ></i> list-1</a></li>
and edit your css : .test a:hover{ color: #000000; }
您可以在li
list-1中添加一个班级,编辑你的css:.test a:hover {color:#000000; }