我们会把 .mh-menu li a 设置成 display:block 并将背景设置为 rgba(255,255,255, 0.8) ，当鼠标悬停到列表项时，我们再把背景色设置成浅蓝色 rgba(225,239,240, 0.4)：
|
1
2
3
|
.mh-menu li:hover a{
background: rgba(225,239,240, 0.4);
}
|
第二个 span 在鼠标悬停时也会改变背景色，但我们希望不同的列表项能够显示不同的颜色，因此我们首先添加一个颜色渐变，然后使用 nth-child 选择器获取元素（有用的:nth-child秘方 ——译者注。）：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
.mh-menu li a span:nth-child(2){
/*...*/
transition: color 0.2s linear;
}
.mh-menu li:nth-child(1):hover span:nth-child(2){
color:
#ae3637;
}
.mh-menu li:nth-child(2):hover span:nth-child(2){
color:
#c3d243;
}
.mh-menu li:nth-child(3):hover span:nth-child(2){
color:
#d38439;
}
.mh-menu li:nth-child(4):hover span:nth-child(2){
color:
#8e7463;
}
|
由于图像要滑到右侧，因此，首先它的 left 值必须是 0px，同时我们也为它的透明度添加一个渐变，它会从初始值 0 渐变到 1 ：
|
1
2
3
4
5
6
7
8
9
10
11
12
|
.mh-menu li img{
position: absolute;
z-index: 1;
left: 0px;
top: 0px;
opacity: 0;
transition: left 0.4s ease-
in
-out, opacity 0.6s ease-
in
-out;
}
.mh-menu li:hover img{
left: 300px;
opacity: 1;
}
|
瞧，这样我们就有了一个很棒的滑出的效果了！
注意要确保锚点的 z-index 值比图像高一点儿，这样图像才会在锚点的下方滑出而不是在它的上面。
另外，我们还可以使背景色在悬浮的时候不透明，例如完全是白色（demo 2），或者为每个子元素设置不同的颜色（demo 3）。
本文中的演示由 Bartosz Kosowski (CC BY-NC 3.0) 提供。
查看DEMO 下载源码
原文地址：http://tympanus.net/codrops/2012/01/22/how-to-spice-up-your-menu-with-css3/
版权所有：Hi,laser! @44ux.com 《如何用CSS3美化菜单》
本文链接：http://44ux.com/index.php/2012/01/how-to-spice-up-your-menu-with-css3/
特别声明：除特别标注，本站文章均为原创，遵循CC BY-NC 3.0，转载请注明出处
京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有 
