最简单的CSS图片翻转效果

今天有读者询问制作鼠标经过时切换图片的效果，这种效果也称为“翻转”效果(roll-over)。原来这种效果大多使用Javascript实现，实际上用CSS可以非常方便地制作出来的。

这里给出一个最简单的效果，在深入的复杂效果变化就非常多了，有兴趣的读者可以慢慢深入研究。

先看一下这个效果，将鼠标移到按钮图片上时，图片就会成另一个了。

Button Text

 

这个效果实现其实非常简单，第一步：准备两个图片，大小完全相同即可，这里是128X34像素。

 

左边这个是通常状态时的图片，叫background.gif，右边这个市鼠标经过时的图片，叫background-hover.gif。

第二步，写HTML部分的代码：

1	<a href="#">Button Text</a>

就是一个非常普通的超链接文本，如果希望完全使用图片而不是用任何文字，也可以。

第三步：CSS部分的代码是这样的：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

a:link, a:visited{ display:block; width:128px; height:34px; font-size:14px;   font-family:Arial; line-height:34px; text-align:center; color:black; text-decoration:none;   background:url('background.gif') no-repeat; }   a:hover, a:active{ background:url('background-hover.gif') no-repeat; color:white; }

好了，这个效果就完成了，是不是非常简单。下面简单解释一下CSS代码的含义。

第1~14行代码是定义鼠标没有经过超链接时的CSS样式：

首先要把a元素变为块级元素，然后设定它的高度和宽度与图片相同。

然后是文字放到图片的中心位置。

最后设定背景图像的地址。

接下来的第16~19行代码定义鼠标经过时所需要变化的CSS样式。

把文字的颜色由黑色变为白色，并把图片换成另一个图片即可了。

说明与讨论：

1：如果对上面的解释还不清楚，比如什么是“块级元素”？如何设置背景图像？这些基本CSS设置方法还不清楚，这些内容很难用一两句话说清楚，请读者仔细看本站的视频教程或《精通CSS+DIV网页样式与布局》这本书，真正把基础掌握扎实永远比模仿着做出几个效果更重要。

2：读者在实验这个效果的时候，可能会发现这个效果目前有一个缺陷，鼠标移到图片上以后，很可能紫色的图片不会立即出现，而是几秒钟以后才出现，这是因为这个图片当时还没有下载到本地计算机上，因此这样对于访问者的感受就不太好了，解决方法是把上面两个图像和在一个图片中，通过使用背景图像的定位属性，来实现普通状态和hover状态显示图片上的不同区域，这样就不会有这样的停顿了。

3：这个例子还可以进一步改进，目前的做法中，按钮的宽度是固定的，如果希望按钮的宽度能够随着按钮上的文字的长度自动是适应，就要使“滑动门”技术了，可以参考《CSS滑动门技术的简单应用》这篇文章，先搞懂“滑动门”的原理，就可以应用到本例中了。