首先需要一張圖片
amazon-sprite_.png
HTML代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div class="box"></div>
</body>
</html>
css代碼如下：
.box{
width: 128px;
height: 41px;
background-image: url(../img/amazon-sprite_.png);
}
.box:link{
display: block;
width: 116px;
height: 41px;
background-image: url(img/未標(biāo)題-1.png);
background-repeat: no-repeat;
}
.box:hover{
background-position: 0px -41px;
}
.box:active{
background-position: 0px -82px;
}
顯示效果如下：
754.png
當(dāng)鼠標(biāo)移入時区拳，圖片就會相應(yīng)的發(fā)生變化
