本文介绍了如何使用CSS3制作一个简单的列表菜单，当鼠标悬停在菜单项上时，图片从左侧滑入并淡显，同时背景色和字体颜色发生变化。通过HTML结构和CSS样式，包括过渡效果和伪类选择器，实现这一交互效果。
最近一直在整理W3cplus Demo站点，收集和写了一些CSS3的Demo效果。今天整理了一下Mary Lou写的《How to spice up your menu with CSS3》效果，整理一下与大家一起学习。
目的
这是一个简单的列表菜单，当你鼠标移到菜单项时，有一张图片慢慢的从左边向右边移动，并淡淡显示出来，而且此时的菜单项背景色和字体色也同时会改变。
下面我们一起来简单的学习这种效果的制作。
HTML Markup
制作上面的效果需要的HTML结构很简单，在每个列表项中放置两个span制作菜单的内容，并同时放置了一张图片，用来制作hover时图片显示出来的效果，具体的代码如下：
CSS Code
接下来制作样式效果。制作这个效果关键有以下几步：
第一步：
设置列表项中a元素的背景色，并在悬停状态下改变他的背景色：
.mh-menu li a{
display: block;
width: 220p
最低0.47元/天 解锁文章
506
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
