HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*未点击之*/
.box:link{
/*将a转换为块元素*/
display: block;
/*设置宽高*/
width:130px;
height:45px;
/*设置背景图片*/
background-image: url(img/1.png);
/*设置背景图片不重复*/
background-repeat: no-repeat;
}
/*鼠标滑动时*/
.box:hover{
/*设置图片宽高*/
width:40px;
height:26px;
/*当是hover状态时，希望图片可以向左10移动,向上340移动*/
background-position:-10px -340px;
}
/*鼠标点击时*/
.box:active{
/*设置图片宽高*/
width:44px;
height: 37px;
/*当是hover状态时，希望图片可以向左57移动,向上330移动*/
background-position:-57px -330px;
}
</style>
</head>
<body>
<a href="#" class="box"></a>
</body>
</html>
