在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术。通过查看源发现,其实他是通过超级链接的伪类实现的,当鼠标放上去的时候改变背景颜色,这种实现能够通过一个类来控制所有的超级链接标签。文章中是通过图片来设置的。
思路一:准备两张大小相同,内容不同的图片,正常情况显示一张,鼠标经过的时候显示另外一张 a:link 是伪类,是超级链接,默认情况 a:hover 做鼠标放上去的时候思路二:将两张图片合成一张图片,设置成图片的背景,然后将a:hover向上移动像素即可,background-position:0 -41;//图片的高度为82
HTML代码如下:
CSS代码如下: