CSS自定义鼠标指针样式

最新推荐文章于 2024-08-15 11:58:19 发布

铁锚

最新推荐文章于 2024-08-15 11:58:19 发布

阅读量2.5w

点赞数

文章标签： cursor 指针 url 优化 css

原文链接: http://davidwalsh.name/css-custom-cursor
Demo地址: http://davidwalsh.name/demo/css-custom-cursor.php
原文日期: 2014-09-16
翻译日期: 2014-09-17
翻译人员: 铁锚

还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometCursor非常强悍,主要用来创建和加载自定义鼠标光标样式。现在可能你会觉得当初的那些实现手段特别老土,但有时又确实需要定制一下光标图案,那么一起来看看CSS怎么实现吧, It's So Easy, 哪里不会点哪里!

CSS代码

CSS中的 cursor 属性可以用逗号分隔指定一系列的光标项,可以用 url() 来自定义光标的图案:

body {
	cursor: url('some-cursor.ico'), default;
}

在实际应用中, 最好在后面加上后备的原生光标,如 default, 这和设置字体( font-family)样式是一样的道理。
有一点需要注意,Firefox会将光标裁剪到一个较小的比例, 而Chrome现在支持更大的图标尺寸。

不要犹豫了,在重要的地方加上自定义指针图标吧. 就如在看相册预览时的放大(+)和缩小(-)按钮,你肯定想做得与众不同.