如何用CSS样式来实现当鼠标放上去时会出现另一张背景图片呢

html-css020

如何用CSS样式来实现当鼠标放上去时会出现另一张背景图片呢,第1张

做好准备工作,把两张100px

X

100px的图片合成

100

X

200

的。通过CSS图片定位来达到切换效果。存放在根目录

img\tupian.gif

<style>

#div_1{width:100pxheight:100pxmargin:0padding:0}

定义一个DIV方框

#div_1

ul,li{list-style:nonemargin:0pxpadding:0px}

定义div_1中UL,LI

#div_1

li{float:leftmargin:0}

#div_1

a{

background:url(img/tupian.gif)

no-repeatwidth:100pxheight:100pxdisplay:block

}

定div_1中链接背景样式等

#a1

a:hover,#a1

a:active{

background-position:

0px

-100pxheight:100px

}

定义一个鼠标悬停状态

</style>

在BODY中

<div

id="div_1"><ul>

<li><a

href="#">首页</a></li>

CSS能更换的图片,只能存在于样式中。所以,这个图片也只能是背景图片。

一般是结合:hover来实现的。例如:

.mydiv{

background:图片1  no-repeat

height:100px

widht:100px

}

.mydiv:hover{

background:图片2  no-repeat

}

这样就实现了图片1和图片2的鼠标移上去的切换。

CSS层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。