前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS自定义鼠标指针样式「建议收藏」

CSS自定义鼠标指针样式「建议收藏」

作者头像
全栈程序员站长
发布2022-08-31 14:42:15
6400
发布2022-08-31 14:42:15
举报

大家好,又见面了,我是你们的朋友全栈君。原文链接: 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() 来自定义光标的图案:

代码语言:javascript
复制
body {
	cursor: url('some-cursor.ico'), default;
}

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

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

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/144069.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022年5月2,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档