CSS参考手册
基本用户界面 | Basic User Interface
光标 | 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) |
? |
? |
? |
? |
基本用户界面 | Basic User Interface相关
层叠样式表（ Cascading Style Sheets ）是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
加载中,请稍侯......