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

css代码实现鼠标指向图片翻转效果,第1张

概述网(Liehuo.Net)教程 今天有读者询问制作鼠标经过时切换图片的效果,这种效果也称为“翻转”效果(roll-over)。原来这种效果大多使用Javascript实现,实际上用CSS可以非常方便地制作出来的。这里给出一个最简单的效果,在深入的复杂效果变化就非常多了,有兴趣的读者可以慢慢深入研…

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

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

  先看一下这个效果:

   
提示:可修改后代码再运行!

  这个效果实现其实非常简单,第一步:准备两个图片,大小完全相同即可,这里是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样式。

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

总结

以上是内存溢出为你收集整理的css代码实现鼠标指向图片翻转效果全部内容,希望文章能够帮你解决css代码实现鼠标指向图片翻转效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1024583.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-23
下一篇 2022-05-23

发表评论

登录后才能评论

评论列表(0条)

保存