<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>雪碧图</title>
<style type="text/css">
.btn{
display:block; /*将内联转成块*/
width:42px; /*购物车的宽高*/
height:30px;
background-image:url("image/yamaxun.png"); /*图片路径*/
background-repeat:no-repeat; /*只显示图片一次，不会平铺*/
background-position: -10px -338px; /*定位购物车左边距和上边距*/
}
.btn:hover{/ *鼠标滑过的链接a：hover*/
background-position: -58px -338px; /*图片的偏移量*/
/*-58是第二个购物车的左边距 和 上边距*/
}
</style>
</head>
<body>
<a href="#" class="btn"></a>
</body>
</html>
正常的：
鼠标经过的：
网友评论