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

//要注意的是这里的hover属性是不能变得，其中图片偏移位置是以  background:  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:  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>

总结

以上是凯发k8官方网为你收集整理的通过css切换图片效果，点击这个图片可以实现连接功能，这里的图片在一张大图片中，每个并要切换的图片没有切换，通过disposition定位的方式做的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得凯发k8官方网网站内容还不错，欢迎将凯发k8官方网推荐给好友。