html制作hover效果,CSS3制作菜单的Hover效果

最近一直在整理W3cplus Demo站点，收集和写了一些CSS3的Demo效果。今天整理了一下Mary Lou写的《How to spice up your menu with CSS3》效果，整理一下与大家一起学习。

目的

这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。

下面我们一起来简单的学习这种效果的制作。

HTML Markup

制作上面的效果需要的HTML结构很简单，在每个列表项中放置两个span制作菜单的内容，并同时放置了一张图片，用来制作hover时图片显示出来的效果，具体的代码如下：

• Art Director

  Henry James

  

CSS Code

接下来制作样式效果。制作这个效果关键有以下几步：

第一步：

设置列表项中a元素的背景色，并在悬停状态下改变他的背景色：

.mh-menu li a{

display: block;

width: 220px;

padding: 0px 10px;

text-align: right;

position: relative;

z-index: 10;

height: 97px;

border-right: 1px solid #ddd;

background: rgba(255,255,255, 0.8);

}

.mh-menu li:hover a{

background: rgba(225,239,240, 0.4);

}

第二步：

第二步是改变每个列表项的第二个span的字体颜色。在这个效果中，使用了两个CSS3效果，其一是transition，第二个就是CSS3的伪类选择器:nth-child

.mh-menu li a span:nth-child(2){

font-weight: 400;

font-style: italic;

font-size: 28px;

font-family: 'Alegreya SC', Georgia, serif;

-webkit-transition: color 0.2s linear;

-moz-transition: color 0.2s linear;

-o-transition: color 0.2s linear;

-ms-transition: color 0.2s linear;

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;

}

第三步：

最后一个效果就是鼠标悬停状态时显示隐藏的img，在这个效果中通过transition改变left和opacity的值。left值从0变到240px，而opacity值从0变到1.

.mh-menu li img{

position: absolute;

z-index: 1;

left: 0px;

top: 0px;

opacity: 0;

-webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

-moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

-o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

-ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;

}

.mh-menu li:hover img{

left: 240px;

opacity: 1;

}

完成上面的关键几步，效果就算是完成了。当然要实现上面demo效果，还需要别的代码支撑。详细的代码大家可以点击这里。

上面的效果只是其中的一种，你可以发挥自己的想像力，在li之类上动动心思，会实现更多的效果。如demo 2、demo 3效果。

到这里效果就算是完成了，不知道大家是否喜欢。如果有更好的心路和创意欢迎在下面的评论中与我们一起分享。或者制作demo效果放在w3cplus demo站上。

如需转载烦请注明出处：