博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
CSS精灵技术
阅读量:4558 次
发布时间:2019-06-08

本文共 399 字,大约阅读时间需要 1 分钟。

在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术。通过查看源发现,其实他是通过超级链接的伪类实现的,当鼠标放上去的时候改变背景颜色,这种实现能够通过一个类来控制所有的超级链接标签。文章中是通过图片来设置的。

思路一:准备两张大小相同,内容不同的图片,正常情况显示一张,鼠标经过的时候显示另外一张

a:link 是伪类,是超级链接,默认情况
a:hover 做鼠标放上去的时候
思路二:将两张图片合成一张图片,设置成图片的背景,然后将a:hover向上移动像素即可,background-position:0 -41;//图片的高度为82

HTML代码如下:

 

	 	  	  	 

CSS代码如下:

  

 

 

转载于:https://www.cnblogs.com/qigang/p/3841929.html

你可能感兴趣的文章
浅析nodejs的buffer类
查看>>
C++ 基类指针,子类指针,多态
查看>>
从TWAIN设备中扫描图像
查看>>
JPA Annotation注解
查看>>
HDU 2089 HDU3555 数位DP
查看>>
【操作系统】堆和动态内存管理
查看>>
jQuery旋转插件jquery.rotate.js 让图片旋转
查看>>
python 零起点(4)
查看>>
【WPF】Combobox指定选中值用selectedValue不是很灵的时候,
查看>>
解决.net移除dll文件以后依旧报错
查看>>
网络资源
查看>>
[RoCE]网络QoS总结
查看>>
[XML] ResourceManager一个操作Resource的帮助类 (转载)
查看>>
C# Redis实战
查看>>
PHP 中英文混排截取字符串
查看>>
Csharp:user WebControl Read Adobe PDF Files In Your Web Browser
查看>>
Davesla!
查看>>
JQuery中实用小技巧总结
查看>>
软件工程--构建之法--功能测试 设计10个或者更多的测试案例完成对钉书钉的功能测试...
查看>>
大视角、大方向、大问题、大架构:(一)信息时代下的管理
查看>>