? ? ? ? ? ? ? ? ? ? ? ????????????????????????? ? ? HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*未點擊之*/
.box:link{
/*將a轉(zhuǎn)換為塊元素*/
display: block;
/*設(shè)置寬高*/
width:130px;
height:45px;
/*設(shè)置背景圖片*/
background-image: url(img/1.png);
/*設(shè)置背景圖片不重復(fù)*/
background-repeat: no-repeat;
}
/*鼠標滑動時*/
.box:hover{
/*設(shè)置圖片寬高*/
width:40px;
height:26px;
/*當是hover狀態(tài)時死陆，希望圖片可以向左10移動,向上340移動*/
background-position:-10px -340px;
}
/*鼠標點擊時*/
.box:active{
/*設(shè)置圖片寬高*/
width:44px;
height: 37px;
/*當是hover狀態(tài)時，希望圖片可以向左57移動,向上330移動*/
background-position:-57px -330px;
}
</style>
</head>
<body>
<a href="#" class="box"></a>
</body>
</html>
