鼠标悬停、点击效果

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

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中的代码

购买

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