<!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
