cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

https://developer.mozilla.org/zh-CN/docs/Web/CSS/cursor

概述

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

初始值 auto

适用元素 all elements

是否是继承属性 yes

适用媒体 visual, interactive

计算值 as specified, but with URIs made absolute

是否适用于 CSS 动画否

正规顺序 the unique non-ambiguous order defined by the formal grammar

语法

如何阅读 CSS 语法。
Formal syntax: [ [ <uri> [<x> <y>]?,]* [ auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | e-resize | n-resize | ne-resize | nw-resize | s-resize | se-resize | sw-resize | w-resize | ew-resize | ns-resize | nesw-resize | nwse-resize | col-resize | row-resize | all-scroll | zoom-in | zoom-out | grab | grabbing ] ]
值

<uri>

url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个<uri>值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值。

<x> <y>

可选 x，y坐标。无单位数字。

关键字值

鼠标悬浮于值上测试效果：

类型 CSS值描述

General auto
浏览器根据当前内容决定指针样式
例如当是内容是文字时使用text样式

default 默认指针，通常是箭头。

none 无指针被渲染

链接及状态 context-menu 指针下有可用内容目录。只有windows中的IE 10有效。

help 指示帮助

pointer 悬浮于连接上时，通常为手

progress 程序后台繁忙，用户仍可交互 (与wait不同).

wait 程序繁忙（沙漏或表）

选择 cell 指示单元格可被选中

crosshair 交叉指针，通常指示位图中的框选

text 指示文字可被选中

vertical-text 指示垂直文字课被选中

拖拽 alias 复制或快捷方式将要被创建

copy 指示可复制

move 被悬浮的物体可被移动

no-drop 当前位置不能扔下
bug 275173Windows中 "no-drop 与not-allowed相同".

not-allowed 不能执行

重设大小及滚动 all-scroll 元素可任意方向滚动（平移）.
bug 275174Windows中, "all-scroll 与 move相同".

col-resize 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头

row-resize
元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头

n-resize 某条边将被移动。例如元素盒的东南角被移动时使用se-resize

e-resize

s-resize

w-resize

ne-resize

nw-resize

se-resize

sw-resize

ew-resize 指示双向重新设置大小

ns-resize

nesw-resize

nwse-resize

缩放 zoom-in
指示可被放大或缩小

zoom-out

Mozilla特定关键字

Grab -moz-grab 元素可被抓起
不推荐在公开网页上使用这些指针。

使用自定图片指针会提供更好的浏览器兼容性

-moz-grabbing 元素被握住

示例

查看在线演示
.foo { cursor: crosshair; }

/* use prefixed-value if "zoom-in" isn't supported */

.bar { cursor: -webkit-zoom-in;  cursor: -moz-zoom-in;  cursor: zoom-in; } 

/* standard cursor value as fallback for url() must be provided (doesn't work without) */

.baz { cursor: url(hyper.cur), auto }
规范

规范状态备注

CSS Basic User Interface Module Level 3
cursor Candidate Recommendation 增加了一些关键字，位置语法及url()

CSS Level 2 (Revision 1)
cursor Recommendation 首次定义

浏览器兼容性

Feature Chrome (WebKit) Firefox (Gecko) Internet Explorer Opera Safari

auto, crosshair, default, move, text, wait,help, n-resize, e-resize, s-resize, w-resize,ne-resize, nw-resize, se-resize, sw-resize 1.0 1.0 (1.0) 4.0 7.0 1.2

hand (just use pointer for this purpose) 未实现未实现 4.0 未实现未实现

pointer, progress 1.0 1.0 (1.0|1.7) 6.0 7.x 1.2 | 3.0

url() - See Using URL values 1.0 (523) 1.5 (1.8)
On MacOs 4.0 (2.0). 6.0 未实现 3.0

Positioning syntax for url() values ? (Yes) 未实现 ? ?

not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize 1.0 (522) 1.5 (1.8) 6.0 10.6 3.0

alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu 1.0 (522 )[1] 1.5 (1.8 )[1] 未实现 10.6 [1] 3.0 [2]

none 5.0 (533) 3.0 (1.9) 9.0 未实现 5.0 [2]

inherit 1.0 1.0 8.0 9.0 1.2

zoom-in, zoom-out 1.0 (522) -webkit- 1.0 (1.4) -moz- 未实现 11.6 3.0 -webkit-

[1] Windows中的Mozilla和WebKit不适用context-menu , Opera中可用。
[2] alias, cell, copy, none 在Windows Safari不适用, Mac中可用。

参见

Using URL values for the cursor property

pointer-events

Webkit's cursor demos (including the extended ones: zoom, zoom-out, grab, grabbing)

Cursor Property (MSDN)

CSS 2.1 and CSS 3 cursor propery test

巴特西

cursor CSS属性定义鼠标指针悬浮在元素上时的外观。

概述

语法

值

示例

规范

浏览器兼容性

参见

最新文章

热门文章

初始值	`auto`
适用元素	all elements
是否是继承属性	yes
适用媒体	visual, interactive
计算值	as specified, but with URIs made absolute
是否适用于 CSS 动画	否
正规顺序	the unique non-ambiguous order defined by the formal grammar

类型	CSS值		描述
General	`auto`		浏览器根据当前内容决定指针样式例如当是内容是文字时使用text样式
	`default`		默认指针，通常是箭头。
	`none`		无指针被渲染
链接及状态	`context-menu`		指针下有可用内容目录。只有windows中的IE 10有效。
	`help`		指示帮助
	`pointer`		悬浮于连接上时，通常为手
	`progress`		程序后台繁忙，用户仍可交互 (与`wait不同`).
	`wait`		程序繁忙（沙漏或表）
选择	`cell`		指示单元格可被选中
	`crosshair`		交叉指针，通常指示位图中的框选
	`text`		指示文字可被选中
	`vertical-text`		指示垂直文字课被选中
拖拽	`alias`		复制或快捷方式将要被创建
	`copy`		指示可复制
	`move`		被悬浮的物体可被移动
	`no-drop`	当前位置不能扔下 bug 275173Windows中 "no-drop 与not-allowed相同".
	`not-allowed`		不能执行
重设大小及滚动	`all-scroll`		元素可任意方向滚动（平移）. bug 275174Windows中, "all-scroll 与 move相同".
	`col-resize`		元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
	`row-resize`		元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
	`n-resize`		某条边将被移动。例如元素盒的东南角被移动时`使用se-resize`
	`e-resize`
	`s-resize`
	`w-resize`
	`ne-resize`
	`nw-resize`
	`se-resize`
	`sw-resize`
	`ew-resize`		指示双向重新设置大小
	`ns-resize`
	`nesw-resize`
	`nwse-resize`
缩放	`zoom-in`		指示可被放大或缩小
缩放	`zoom-out`		指示可被放大或缩小

规范	状态	备注
CSS Basic User Interface Module Level 3 cursor	Candidate Recommendation	增加了一些关键字，位置语法及`url()`
CSS Level 2 (Revision 1) cursor	Recommendation	首次定义

Feature	Chrome (WebKit)	Firefox (Gecko)	Internet Explorer	Opera	Safari
`auto`, `crosshair`, `default`, `move`, `text`, `wait`,`help`, `n-resize`, `e-resize`, `s-resize`, `w-resize`,`ne-resize`, `nw-resize`, `se-resize`, `sw-resize`	1.0	1.0 (1.0)	4.0	7.0	1.2
`hand` (just use `pointer` for this purpose)	未实现	未实现	4.0	未实现	未实现
`pointer`, `progress`	1.0	1.0 (1.0\|1.7)	6.0	7.x	1.2 \| 3.0
`url()` - See Using URL values	1.0 (523)	1.5 (1.8) On MacOs 4.0 (2.0).	6.0	未实现	3.0
Positioning syntax for `url()` values	?	(Yes)	未实现	?	?
`not-allowed`, `no-drop`, `vertical-text`, `all-scroll`, `col-resize`, `row-resize`	1.0 (522)	1.5 (1.8)	6.0	10.6	3.0
`alias`, `cell`, `copy`, `ew-resize`, `ns-resize`, `nesw-resize`, `nwse-resize`, `context-menu`	1.0 (522 )[1]	1.5 (1.8 )[1]	未实现	10.6 [1]	3.0 [2]
`none`	5.0 (533)	3.0 (1.9)	9.0	未实现	5.0 [2]
`inherit`	1.0	1.0	8.0	9.0	1.2
`zoom-in`, `zoom-out`	1.0 (522) -webkit-	1.0 (1.4) -moz-	未实现	11.6	3.0 -webkit-