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现在支持更大的图标尺寸。

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

时间： 2024-12-11 10:27:08

CSS自定义鼠标指针样式的相关文章

css Cursor:url()自定义鼠标指针样式为图片

css自定义鼠标指针样式为图片Cursor:url()的使用,今天在项目中,要用到自定义鼠标样式,格式: css:{cursor:url('绝对路径的图片(格式:cur,ico)'),-moz-zoom-out;}//FF下面 css:{cursor:url('绝对路径'),auto;}//IE,FF,chrome浏览器都可以 前面url是自定义鼠标格式,图像的绝对路径地址,后面的参数是css标准的cursor样式,(IE下面可以不需要) 图标的格式根据不同的浏览器来分:IE支持cur,ani,

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

电脑鼠标指针样式更改

电脑鼠标指针样式更改 前言: 今天在办公室,看到坐在隔壁的吴老师的电脑,发现她的桌面的鼠标指针是动态的, 不像平时看到的呆呆的那种鼠标指针,出于好奇,易安就偷了她的电脑嘿嘿嘿~ 爱美之心人皆有之,其实大多数人都会的啦,但是写出来给一些不会的人看吧,别忘了关注我吖 步骤: 一.    下载好指针文件,易安已经帮你下好款比较美观的鼠标指针文件啦~(需要的可以关注公众号获取哦) 二.    复制文件(也可以复制文件夹哦) 三.    打开我们的系统盘(一般都是C盘啦~) 我的系统盘是C盘,所以这里打开

修改鼠标指针样式

在编写html时,有时我们需要修改鼠标指针的样式,比较形象的有qq农场的指针样式,如果我们自定义也可以实现该效果.大家可以通过修改css样式cursor来实现. cursor取值: auto : 默认值.浏览器根据当前情况自动确定鼠标光标类型. all-scroll : IE6.0 有上下左右四个箭头,中间有一个圆点的光标.用于标示页面可以向上下左右任何方向滚动. col-resize : IE6.0 有左右两个箭头,中间由竖线分隔开的光标.用于标示项目或标题栏可以被水平改变尺寸. crossh

自定义鼠标指针

/// <summary> /// 改变鼠标指针 /// </summary> /// <param name="cursor"></param> /// <param name="hotPoint"></param> public void SetCursor(Bitmap cursor, Point hotPoint) { int hotX = hotPoint.X; int hotY =

[分享] 通过修改CSS自定义chrome滚动条样式

首先得说一句 我不懂CSS的写法之类的 这段CSS也是在网上找的 所以有更先进的需求的话 我肯定不能满足你们了 不好意思效果图在10楼有人上了 我这边不管怎么弄 上传图片都卡在96% 而且不翻wall不能回帖 翻wall的情况下 上论坛这个慢啊 所以 大家去看这个图吧http://bbs.kafan.cn/forum.php?mo ... &fromuid=487958大家都知道哈 chrome能自定义的东西比较少 不像FF或者opera那样 几个样式 或者脚本 就能把浏览器改成任何想要的样子

CSS鼠标指针cursor样式

参考来源:W3SCHOOL 有时我们需要在CSS布局时设定特定的鼠标指针样式,这时可以通过设定cursor来实现: url: 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标; default: 默认光标(通常是一个箭头); auto: 默认.浏览器设置的光标; crosshair: 光标呈现为十字线; pointer: 光标呈现为指示链接的指针(一只手); move: 此光标指示某对象可被移动; e-resize: 此光标指示矩形

CSS中cursor 鼠标指针光标样式（形状）

在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 常用cursor光标 url 需使用的自定义光标的 URL. 注释:请在此列表的末端始终定义一种普通的光标,以防没有由 URL 定义的可用光标. default 默认光标(通常是一个箭头)auto 默认.浏览器设置的光标.crosshair 光标呈现为十字线.pointer 光标呈现为指示链接的指针(一只手)move 此光标指示某对象可被

CSharp如何自定义鼠标样式

一.如何设置鼠标样式? 在CSharp的WinForm开发中,可以通过下面的API设置鼠标样式: 1 //把鼠标样式设置为十字(系统自带的一种鼠标样式) 2 this.Cursor = Cursors.Cross; 3 //把鼠标样式设置为自定义图片 4 this.Cursor = new Cursor(string fileName);//要求file为cur格式 5 this.Cursor = new Cursor(IntPtr handel); 6 this.Cursor = new Cu