首先需要一张图片
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/未标题-1.png);
background-repeat: no-repeat;
}
.box:hover{
background-position: 0px -41px;
}
.box:active{
background-position: 0px -82px;
}
显示效果如下：
754.png
当鼠标移入时，图片就会相应的发生变化
网友评论