比如
.imgA {background: url(demo1.jpg) no-repeat}
.imgB {background: url(demo2.jpg) no-repeat}
....
然后在需要切换背景的层上用js替换class就行
1.如果仅仅是光标放到div按钮上按钮背景图片改变，直接用css实现：
.div1{background:url(../images/but_01.gif) }.div1:hover{background:url(../images/but_02.gif)}
2.如果是点击div按钮，按钮背景图片改变，可以用JQuery实现：
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<title></title>
<script src="Scripts/jquery-1.6.1.min.js" type="text/javascript"></script>
<style type="text/css">
.div1
{
width: 300px
height: 300px
border: 1px solid black
background-image: url(Images/1.jpg)
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$(".div1").bind("click", function () {
$(this).css("background-image", "url(Images/3.jpg)").mouseout(function () {
$(this).css("background-image", "url(Images/1.jpg)")
})
})//bind
}) //ready
</script>
</head>
<body>
<div class="div1">
</div>
</body>
</html>
可以在hover伪类中用background或者background-image实现。例如：
页面上有一个
原本背景图为img1.png，当鼠标滑过则换为img2.png.
在CSS中这样定义
.div_style:hover{
background:
url("img2.png")
//这是改变背景色
background-repeat:
no-repeat
//这是让背景色不平铺
color:
red
//这是让字体变为红色
}
或者用
.div_style:hover{
background-image:
url("img2.png")
//这是改变背景色
background-repeat:
no-repeat//这是让背景色不平铺
color:red
//这是让字体变为红色
}
