css代码实现鼠标指向图片翻转结果
发布时间：2018-08-24 23:07:37 所属栏目：创业 来源：站长网
导读：猛火网(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样式。 把笔墨的颜色由玄色变为白色，并把图片换成另一个图片即可了。 （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
