您当前位置：首页 > web前端 > htmlcss > css代码实现鼠标指向图片翻转效果

css代码实现鼠标指向图片翻转效果

来源：程序员人生发布时间：2014-04-28 06:24:37 阅读次数：2459次

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

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

　　先看一下这个效果：

　　 <html><head><title>css代码实现鼠标指向图片翻转效果_网_liehuo.net</title><style>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('/uploads/allimg/090809/1524563X7-0.gif') no-repeat;}/*注意这里的图片路径 liehuo.net*/a:hover, a:active{background:url('/uploads/allimg/090809/1524561063-1.gif') no-repeat;color:white;}</style><body><a href="#" _fcksavedurl="#">LieHuo.Net</a></body></html>
提示：可修改后代码再运行!

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

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

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

<a href="#">LieHuo.Net</a>

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

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

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('/uploads/allimg/090809/1524563X7-0.gif') no-repeat;
} /*注意这里的图片路径 liehuo.net*/

a:hover, a:active{
background:url('/uploads/allimg/090809/1524561063-1.gif') no-repeat;
color:white;
}

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

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

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

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

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

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

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生