css代码实现鼠标指向图片翻转效果
发布时间：2018-08-24 14:40:04 所属栏目：经验 来源：站长网
导读：烈火网(Liehuo.Net)教程 今天有读者询问制作鼠标经过时切换图片的效果，这种效果也称为翻转效果(roll-over)。原来这种效果大多使用 Java script实现，实际上用CSS可以非常方便地制作出来的。 这里给出一个最简单的效果，在深入的复杂效果变化就非常多了，
|
烈火网(Liehuo.Net)教程 今天有读者询问制作鼠标经过时切换图片的效果，这种效果也称为“翻转”效果(roll-over)。原来这种效果大多使用Javascript实现，实际上用CSS可以非常方便地制作出来的。 这里给出一个最简单的效果，在深入的复杂效果变化就非常多了，有兴趣的读者可以慢慢深入研究。 先看一下这个效果： 这个效果实现其实非常简单，第一步：准备两个图片，大小完全相同即可，这里是128X34像素。   左边这个是通常状态时的图片，叫background.gif，右边这个市鼠标经过时的图片，叫background-hover.gif。 第二步，写HTML部分的代码：
就是一个非常普通的超链接文本，如果希望完全使用图片而不是用任何文字，也可以。 第三步：CSS部分的代码是这样的：
好了，这个效果就完成了，是不是非常简单。下面简单解释一下CSS代码的含义。 第1~14行代码是定义鼠标没有经过超链接时的CSS样式： 首先要把a元素变为块级元素，然后设定它的高度和宽度与图片相同。 然后是文字放到图片的中心位置。 最后设定背景图像的地址。 接下来的第16~19行代码定义鼠标经过时所需要变化的CSS样式。 把文字的颜色由黑色变为白色，并把图片换成另一个图片即可了。 （编辑：武汉站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐
热点阅读