cursor

您正在阅读此内容的英文版本,因为该语系尚未翻译。 帮助我们翻译此文章吧!

概述

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

/* 仅关键字 */
cursor: pointer;
cursor: auto;

/* 使用URL并提供一个关键字值作为回退机制 */
cursor: url(hand.cur), pointer;

/* URL和xy的坐标偏移值,最后提供一个关键字值作为回退机制 */
cursor:  url(cursor1.png) 4 12, auto;
cursor:  url(cursor2.png) 2 2, pointer;

/* 全局属性 */
cursor: inherit;
cursor: initial;
cursor: unset;

cursor属性为零个或多个<url>值,最后必填一个关键字值,它们之间用逗号分隔。<url>指向一个图像文件。浏览器将尝试加载指定的第一个图像,如果无法加载则返回下一个图像,如果无法加载图像或未指定图像,则返回关键字值。

每个<url>后面都可选跟一对空格分隔的数字<x><y>表示偏移。这些将设置光标相对于图像左上角的点。

例如,下面的例子使用<url>值指定两个图像,为第二个图像提供<x><y>坐标,如果两个图像都无法加载,则返回progress关键字值:

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

语法

Formal syntax: [ [ <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 ] ]

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

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

类型 CSS值 描述
General auto

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

default default.gif 默认指针,通常是箭头。
none 无指针被渲染
链接及状态 context-menu context-menu.png 指针下有可用内容目录。只有windows中的IE 10有效。
help help.gif 指示帮助
pointer pointer.gif 悬浮于连接上时,通常为手
progress progress.gif 程序后台繁忙,用户仍可交互 (与wait不同).
wait wait.gif 程序繁忙(沙漏或表)
选择 cell cell.gif 指示单元格可被选中
crosshair crosshair.gif 交叉指针,通常指示位图中的框选
text text.gif 指示文字可被选中
vertical-text vertical-text.gif 指示垂直文字可被选中
拖拽 alias alias.gif 复制或快捷方式将要被创建
copy copy.gif 指示可复制
move move.gif 被悬浮的物体可被移动
no-drop no-drop.gif 当前位置不能扔下
bug 275173Windows中 "no-drop 与not-allowed相同".
not-allowed not-allowed.gif 不能执行
grab grab.gif

可抓取

译者注:grab和grabbing在比较后期才被支持,见浏览器兼容表

grabbing grabbing.gif 抓取中
重设大小及滚动 all-scroll all-scroll.gif 元素可任意方向滚动 (平移).
bug 275174Windows中, "all-scrollmove相同".
col-resize col-resize.gif 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize row-resize.gif

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

n-resize Example of a resize towards the top cursor 某条边将被移动。例如元素盒的东南角被移动时使用se-resize
e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif 指示双向重新设置大小
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
缩放 zoom-in zoom-in.gif

指示可被放大或缩小

zoom-out zoom-out.gif

示例

.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 }

Usage notes

Although the specification does not define any size limitations for cursor, individual user agents may choose to do so. Cursor changes using images which are outside the size range supported by the browser will generally just be ignored.

Check the Browser compatibility table for any notes on cursor size limits.

规范

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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
cursorChrome Full support 1Edge Full support 12Firefox Full support 1
Notes
Full support 1
Notes
Notes Starting in Firefox 67, the maximum size allowed for custom cursors is 32x32 pixels due to cursors being misused by certain malicious sites.
IE Full support 4
Notes
Full support 4
Notes
Notes In Internet Explorer 11, when cursor is applied to an element and this element is underneath an open <select> menu and the user hovers over a <select> menu item that's on top of said element, the cursor for said element will be displayed rather than the <select>'s normal cursor. See bug 817822.
Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android Full support YesSafari iOS Full support 1Samsung Internet Android ?
aliasChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
all-scrollChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
autoChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Bidirectional resize cursors (ew-resize, nesw-resize, ns-resize, and nwse-resize)Chrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
cellChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
col-resizeChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
context-menuChrome Full support 1
Notes
Full support 1
Notes
Notes This cursor is only supported on macOS and Linux.
Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes This cursor is only supported on macOS and Linux.
IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18
Notes
Full support 18
Notes
Notes This cursor is only supported on macOS and Linux.
Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
copyChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 10Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
crosshairChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
defaultChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Grab cursors (grab and grabbing)Chrome Full support 68
Notes
Full support 68
Notes
Notes Chrome also continues to support the prefixed versions.
Full support 1
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome 22 added Windows support.
Edge Full support 14Firefox Full support 27
Full support 27
Full support 1.5
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 55
Notes
Full support 55
Notes
Notes Opera also continues to support the prefixed versions.
Full support 15
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera 22 added Windows support.
Safari Full support 11
Full support 11
Full support 4
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android No support NoChrome Android Full support 68
Notes
Full support 68
Notes
Notes Chrome also continues to support the prefixed versions.
Full support 18
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Chrome 22 added Windows support.
Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
helpChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
inheritChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 8Opera Full support 9Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
moveChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
no-dropChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
noneChrome Full support 5Edge Full support 12Firefox Full support 3IE Full support 9Opera Full support 15Safari Full support 5WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 4.2Samsung Internet Android ?
not-allowedChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
pointerChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
progressChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
row-resizeChrome Full support 1Edge Full support 12Firefox Full support 1.5IE Full support 6Opera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
textChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Unidirectional resize cursors (n-resize, e-resize, s-resize, w-resize, ne-resize, nw-resize, se-resize, and sw-resize)Chrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
url()Chrome Full support 1Edge Full support 12Firefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Firefox 4 added macOS support.
IE Full support 6Opera Full support 15Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
url() positioning syntax
Experimental
Chrome Full support 1Edge No support NoFirefox Full support 1.5
Notes
Full support 1.5
Notes
Notes Firefox 4 added macOS support.
IE No support NoOpera Full support 15Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
vertical-textChrome Full support 1Edge Full support 12Firefox Full support 1.5IE No support NoOpera Full support 10.6Safari Full support 3WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
waitChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1.2WebView Android No support NoChrome Android Full support 18Firefox Android No support NoOpera Android ? Safari iOS Full support 1Samsung Internet Android ?
Zoom cursors (zoom-in and zoom-out)Chrome Full support 37
Full support 37
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Edge Full support 12Firefox Full support 24
Full support 24
Full support 1
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera Full support 24
Full support 24
No support 15 — 23
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari Full support 9
Full support 9
Full support 3
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
WebView Android No support NoChrome Android Full support 37
Full support 37
Full support 18
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Firefox Android No support NoOpera Android Full support 24
Full support 24
No support 14 — 24
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Safari iOS Full support 1Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见