光标 | cursor

cursor

cursorCSS属性定义鼠标指针悬浮在元素上方显示的鼠标光标。

/* Keyword value only */
cursor: pointer;
cursor: auto;

/* Using URL and coordinates */
cursor: url(cursor1.png) 4 12, auto;
cursor: url(cursor2.png) 2 2, pointer;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: unset;

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

语法

该cursor属性被指定为零个或多个<url>值，用逗号分隔，后跟一个强制关键字值。每个<url>应该指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果不能加载，则回退到下一个图像，如果没有图像可以加载（或没有指定任何图像），回退到关键字值。

每个<url>可以选择跟随一对代表<x><y>坐标的空格分隔的数字。这些将设置光标的热点，相对于图像的左上角。

例如，使用<url>值指定两个图像，为<x><y>第二个图像提供坐标，progress如果两个图像都不能加载，则返回到关键字值：

cursor: url(one.svg), url(two.svg) 5 5, progress;

值

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

关键字值

类型	CSS值	Actual	描述
General	auto		浏览器根据当前内容决定指针样式例如当是内容是文字时使用text样式
default		No special behavior is present. Typically an arrow.
none		No cursor is rendered.
链接及状态	context-menu		A context menu is available.
help		Help information is available.
pointer		The element can be interacted with by clicking on it. Used, e.g., when hovering over links. Typically an image of a hand.
progress		The program is busy in the background, but the user can still interact with the interface (in contrast to wait).
wait		The program is busy, and the user can't interact with the interface (in contrast to progress). Sometimes an image of an hourglass or a watch.
选择	cell		The table cell can be selected.
crosshair		Cross cursor, often used to indicate selection in a bitmap.
text		The text can be selected. Typically the shape of an I-beam.
vertical-text		The vertical text can be selected. Typically the shape of a sideways I-beam.
拖拽	alias		An alias or shortcut is to be created.
copy		Something can be copied.
move		Something can be moved.
no-drop		An item may not be dropped at the current location. bug 275173: On Windows and Mac OS X, no-drop is the same as not-allowed.
not-allowed		Something can't be done.
重设大小及滚动	all-scroll		Something can be scrolled in any direction (panned). bug 275174: On Windows, all-scroll is the same as move.
col-resize		The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating them.
row-resize		The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
n-resize		Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box. In some environments, an equivalent bidirectional resize cursor is shown. For example, n-resize and s-resize are the same as ns-resize.
e-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize		Bidirectional resize cursor.
ns-resize
nesw-resize
nwse-resize
Zoom	zoom-in		Something can be zoomed (magnified) in or out.
zoom-out
Grab	grab		Something can be grabbed (dragged to be moved).
grabbing

正式语法

[ [ <url> [ <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 ] ]

示例

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
} 

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

规范

Specification	Status	Comment
CSS Basic User Interface Module Level 3The definition of 'cursor' in that specification.	Candidate Recommendation	Addition of several keywords and the positioning syntax for url().
CSS Level 2 (Revision 1)The definition of 'cursor' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer/Edge	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	(Yes)	1.0	4.01	7.0	1.2
pointer, progress	1.0	(Yes)	1.0	6.0	7.0	1.2
url()	1.0	(Yes)	1.5 4.02	6.0	?	3.0
Positioning syntax for url() values	(Yes)	No support	(Yes)	No support	?	(Yes)
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize	1.0	(Yes)	1.5	6.0 vertical-text 14.1	10.6	3.0
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize	1.0	(Yes)	1.5	10.0	10.6	3.0
context-menu	1.03	(Yes)	1.53	10.0	10.6	3.0
none	5.0	(Yes)	3.0	9.0	15.0	5.0
inherit	1.0	(Yes)	1.0	8.0	9.0	1.2
zoom-in, zoom-out	1.0 -webkit- 37	(Yes)	1.0 -moz- 24.0	13	11.6 15-23 -webkit- 24	3.0 -webkit- 9
grab, grabbing	1.0 -webkit- 22.0 -webkit-4	(Yes)	1.5 -moz- 27.0	14	(Yes)	4.0 -webkit-

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
auto, crosshair, default, move, text, wait, help, n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, sw-resize	No support	(Yes)	?	?	?	?
pointer, progress	No support	(Yes)	?	?	?	?
url()	No support	(Yes)	?	?	?	?
Positioning syntax for url() values	No support	No support	?	?	?	?
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize	No support	(Yes)	?	?	?	?
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize	No support	(Yes)	?	?	?	?
context-menu	No support	(Yes)	?	?	?	?
none	No support	(Yes)	?	?	?	?
inherit	No support	(Yes)	?	?	?	?
zoom-in, zoom-out	No support	(Yes)	?	?	?	?
grab, grabbing	No support	(Yes)	?	?	?	?