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;

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

   鼠标悬浮于值上可实时演示

类型 CSS值 描述
General auto

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

default default.gif 默认指针,通常是箭头。
none 无指针被渲染
链接及状态 context-menu context-menu.png 指针下有可用内容目录。
help help.gif 指示帮助
pointer pointer.gif 悬浮于连接上时,通常为手
progress progress.gif 程序后台繁忙,用户仍可交互 (与wait相反).
wait wait.gif 程序繁忙,用户不可交互 (与progress相反).图标一般为沙漏或者表。
选择 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或Mac OS X中 "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

语法形式

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

注意事项

尽管规范没有为游标定义任何大小限制,但是不同的user agents可能进行了限制。 使用超出浏览器支持的大小范围的图像进行的光标更改通常只会被忽略。

查阅 Browser compatibility 表格来获取指针大小的限制信息。

示例

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
} 

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

规范

规范 状态 备注
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 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14
Notes
Full support 14
Notes
Notes This cursor is only supported on macOS and Linux.
Safari iOS Full support 1Samsung Internet Android Full support 1.0
Notes
Full support 1.0
Notes
Notes This cursor is only supported on macOS and Linux.
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 48
Notes
Full support 48
Notes
Notes Opera also continues to support the prefixed versions.
Full support 14
Prefixed Notes
Prefixed Implemented with the vendor prefix: -webkit-
Notes Opera 22 added Windows support.
Safari iOS Full support 1Samsung Internet Android Full support 10.0
Full support 10.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 4.2Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
url() positioning syntaxChrome Full support 1Edge Full support 79Firefox 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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 14Safari iOS Full support 1Samsung Internet Android Full support 1.0
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 Full support 3.0
Full support 3.0
Full support 1.0
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

参见