开发者社区> 铁锚> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

CSS自定义鼠标指针样式

简介: 原文链接: http://davidwalsh.name/css-custom-cursorDemo地址: http://davidwalsh.name/demo/css-custom-cursor.php原文日期: 2014-09-16翻译日期: 2014-09-17翻译人员: 铁锚还记得Web 1.0时代的那些苦逼岁月吗? 你想尽一切办法来优化你的网站. 还要饱受IE6惨无人道的虐待,举个栗子, IE中那些害死人不偿命的滚动条, 我一直记得第三方类库 CometCursor. CometCursor非常强悍,主要用来创建和加载自定义鼠标光标样式。
+关注继续查看
原文链接: 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现在支持更大的图标尺寸。

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
CSS 鼠标样式和手指样式
巧合要用到鼠标样式效果,就顺便整理了下十五种CSS鼠标样式,小例子供大家使用啊。CSS鼠标样式语法如下: 任意标签中插入 style="cursor:*"   例 子:<span style="cursor:*">文本或其它页面元素</span>  <a href="#" style="cursor:*">文本或其它页面元素</a>
947 0
CSS3透明背景表单
在线演示 本地下载
559 0
如何给背景图像使用CSS3变形
如何给背景图像使用CSS3变形呢?在这里,Craig Buckler给出了答案。
2391 0
CSS-背景渐变的兼容写法
background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.5) 75%); background-image: -webkit-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.
443 0
精通CSS+DIV网页样式与布局--页面背景
       上篇博客,我们主要简单的总结了CSS的图片效果,我们这回来讲讲CSS如何对网页的背景进行设置,网页的背景是整个网页的重要组成部分,她直接决定了整个网页的风格和色调。
1018 0
如何自定义CSS滚动条的样式?
原文:如何自定义CSS滚动条的样式? 欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表 本文会介绍CSS滚动条选择器,并在demo中展示如何在Webkit内核浏览器和IE浏览器中,自定义一个横向以及一个纵向的滚动条。
907 0
+关注
铁锚
Java与数据库开发
文章
问答
文章排行榜
最热
最新
相关电子书
更多
零基础CSS入门教程
立即下载
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载