昨天有一个朋友问我,我网站右上角那几个按钮,鼠标经过时变色是怎么做到的,我答道是用CSS控制
的,他大吃一惊,说还以为我是用javascript来实现的,怎么CSS也可以实现这种特效吗?我无语。。
好吧,虽然网上已经很多这类的教程了,但既然某些懒人还是懒得自己去找,那我就在这里写一次吧,
CSS有三个伪类用来控制访问样式,分别是a:link,a:hover和a:visited。
a:link就是链接正常时的样式,a:hover是鼠标经过时链接的样式,而a:visited则是已经访问过的链接的
样式。它们有几个常用的属性:
text-decoration:控制链接文本的下划线
color:控制链接文本的颜色
background-color:链接的背景颜色
background-image:用来放置背景图片的
通常我们会把链接做成列表,譬如
href="XXX.html">按钮1
href="XXX.html">按钮2
很多写CSS的时候就会直接写
.button ul li a{background-image:url(XXX.gif); width:80px;
height:30px;}
然后出来的效果根本不是这么回事,背景图片只显示了很小的一块, 不能显示整个按钮出来。
这里有一个误区,我们知道标签是属于内联元素(不知道内联元素和块元素概念的童鞋请自行百度
一下),内联元素是没有宽度和高度属性的,所以你在CSS中指定的宽度和高度是没有用的,背景图片
还是会按照内联元素的方式来显示标签中的内容。
所以,首先要把标签先转换成块元素来显示
.button ul li a{ display:block; background-image:url(XXX.gif);
width:80px; height:30px; line-
height:30px;}
还要加上line-height行高,这样背景图片就会正常显示了
OK,我们来个实例,先用photoshop做好按钮的两个样式,分别是正常时和鼠标经过时的样式,如图
1、这个是正常时的gif图片
CSS代码:.button ul li a{ display:block;
text-decoration:none;
background:url(../images/button.gif)
no-repeat;
color:#fff; }//这里的color是文本字体的颜色
2、这个是鼠标经过时的gif图片
CSS代码:.button ul li a:hover{
color:#fff;//同上
text-decoration:none;
background:url(../images/button2.gif)
no-repeat; }