在HTML页面上我们经常会看到一些变化效果,这样子的页面一般都受到大家的喜欢,
因为1.它很好的给用户作出引导;2.这样的效果使整个页面不会那么的乏味,变得可爱起来。
那么如何实现这种鼠标经过按钮发生变化效果呢?
第一步: 我们设计效果图中的按钮图片image.gif,作出鼠标经过时所要产生的效果图片image_over.gif;
第二步:要鼠标经过按钮发生变化效果那么就要用到“active动态伪类触发”,那么它的代码就是:
a:link, a:visited {
display: block;
width: 60px;
height: 20px;
line-height: 40px;
color: #FFF;
text-decoration: none;
background: #e9e9e9 url ( images / image.gif ) no-repeat left top;
text-indent:40px;}
a:hover {
background: #FF0S42 url ( images / image_over.gif ) no-repeat left top;
color:#ccc;}
小提示:image.gif 是用于正常状态的图片 image_over.gif 是用于鼠标停留状态的图片