CSS自定义光标样式

最近W3C组织宣布HTML5标准正式发布,这对于WEB程序员来说是一个应该庆祝的日子。HTML5标准和浏览器的进步给Web程序员的开发带来的极大的便利,以前几乎无法实现或非常难以实现的功能,现在只需要标准的HTML5标记就能完成,比如HTML5日期输入类型(date) HTML5中新型input类型@font-face的用法canvas动画等。这里要说的一个技巧也是以往在老式的IE浏览器里很难实现的功能——用css自定义鼠标光标样式。使用CSS能很容易的实现这个功能。

自定义光标样式的CSS代码

CSS里的cursor属性能接受很多种光标样式属性,而且,如果使用url()表达式,你还能用自己的图片自定义光标图案样式:

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

程序员编程要有个好习惯,要给程序留下备份方案,当第一方案不起作用时,备份方案能挽回错误,所以,这里使用了default值做备份,这个跟设置字体的font-family的思路是一样的。还有一点要注意的是,如果使用谷歌浏览器,光标图案的大小会跟图片原生大小一样,但在火狐浏览器里,自定义光标图案总是缩小到标准大小。

这个功能虽然非常有趣,但还是应该用在需要的时候、必要的时候,如果是滥用,效果反而适得其反。你觉得呢?

阅读余下内容
 

《“CSS自定义光标样式”》 有 3 条评论

  1. 站长您好,我发现自己无法使用自定义光标,就像这样:
    cursor: url(‘some-cursor.ico’);
    我试过cur、ico、gif等等格式,均使用本地相对链接,都无法在浏览器中显示,比如safari、chrome、firefox,操作系统是Mac,请问问题出在哪里呢?我用英文搜索『custom cursor css』等等关键词也找不到这方面的资料……跟webkit前缀有关系吗?

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注


京ICP备12002735号