光标 | cursor
cursorCSS属性定义鼠标指针悬浮在元素上方显示的鼠标光标。
/* Keyword value only */
cursor: pointer;
cursor: auto;
/* Using URL and coordinates */
cursor: url(?developer/section/1071903/cursor1.png) 4 12, auto;
cursor: url(?developer/section/1071903/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(?developer/section/1071903/one.svg), url(?developer/section/1071903/two.svg) 5 5, progress;值
<url>url(?developer/section/1071903/…)或者逗号分隔的url(?developer/section/1071903/…), url(?developer/section/1071903/…), ?developer/section/1071903/…，指向图片文件。用大于一个<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(?developer/section/1071903/"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) | ? | ? | ? | ? |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
