鼠标悬停、点击效果

我们在很多网页中都会看到鼠标悬停变色点击的时候又是另一个样子的图标，那是用背景图片定位显示的效果
在这里我举四个例子：

css中的代码：
.nav:link{
display: block;
width: 1200px;
height: 40px;
background-image: url(1/nav.png);
margin:30px auto;
overflow: hidden;
zoom: 1;
}
.nav:hover{
background-image: url(1/nav.png);
background-position: 0 -50px;
}
.nav:active{
background-image: url(1/nav.png);
background-position: 0 -140px;
}

.search:link{
width: 30px;
height: 35px;
display: block;
background-image: url(1/search.PNG);
margin:30px auto;
}
.search:hover{
background-image: url(1/search.PNG);
background-position: -60px 0;
}
.search:active{
background-image: url(1/search.PNG);
background-position: -90px 0;
}

.top:link{
display: block;
width: 22px;
height: 15px;
background-image: url(1/top.png);
margin: 30px auto;
}
.top:hover{
background-image: url(1/top.png);
background-position: 0 -19px;
}
.top:active{
background-image: url(1/top.png);
background-position: 0 -18px;
}

.buy_car{
width: 45px;
height: 37px;
display: block;
background-image: url(1/big_car.png);
margin:30px auto;
}
.buy_car:hover{
background-image: url(1/big_car.png);
background-position: -53px 0;
}
.buy_car:active{
background-image: url(1/big_car.png);
background-position: -119px 0;
}

HTML中的代码

<a href="#" class="search"></a>
<a href="#" class="top"></a>
<a href="#" class="buy_car"></a>

可以复制一下看看效果哦！