//要注意的是这里的hover属性是不能变得，其中图片偏移位置是以
background: url("images/icons.png") no-repeat scroll 0 0 transparent;中的（0,0）这个点为参考点的。
如果图片要想定位到(0,0)点要向上移或是左移，所以是负值
.release-op a {
display
:
block
;
float
:
left
;
margin
:
14px 0 0 40px
;
}
.icon-text {
background-position
:
2px -238px
;
}
.icon-text, .icon-photo, .icon-video, .icon-music, .icon-link {
height
:
75px
;
width
:
60px
;
}
.icon {
background
:
url(images/icons.png) no-repeat scroll 0 0 transparent
; //表示在icons.png这张含有很多很多图片的大图片中取出我们自己想要得图片
cursor
:
pointer
;
margin
:
5px
;
}
a {
text-decoration
:
none
;
}
.icon-text:hover {
background-position
:
2px -318px
;
}
.icon-photo {
background-position
:
-113px -238px
;
}
.icon-photo:hover {
background-position
:
-113px -318px
;
}
.icon-video {
background-position
:
-227px -238px
;
}
.icon-video:hover {
background-position
:
-227px -318px
;
}
.icon-music {
background-position
:
-343px -238px
;
}
.icon-music:hover {
background-position
:
-343px -318px
;
}
.icon-link {
background-position
:
-456px -238px
;
}
.icon-link:hover {
background-position
:
-456px -318px
;
}
对应的HTML代码
<div class="release-op right shadow">
<a class="icon icon-text" href="###"></a>
<a class="icon icon-photo" href="###"></a>
<a class="icon icon-video" href="###"></a>
<a class="icon icon-music" href="###"></a>
<a class="icon icon-link" href="###"></a>
<div class="header-reg-right right">
<a href="###">15秒驾驭车友说 →</a>
</div>
</div>
