通过CSS切换图片效果，点击这个图片可以实现连接功能，这里的图片在一张大图片中，每个并要切换的图片没有切换，通过disposition定位的方式做

//要注意的是这里的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>