概述
cursor CSS属性定义鼠标指针悬浮在元素上时的外观。
| 初始值 | auto |
|---|---|
| 适用元素 | all elements |
| 是否是继承属性 | yes |
| 适用媒体 | visual, interactive |
| 计算值 | as specified, but with URIs made absolute |
| 是否适用于 CSS 动画 | 否 |
| 正规顺序 | the unique non-ambiguous order defined by the formal grammar |
语法
Formal syntax: [ [ <uri> [<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 ] ]
值
- <
uri> url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个<uri>值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值。<x><y>- 可选 x，y坐标。无单位数字。
- 关键字值
-
鼠标悬浮于值上测试效果：
类型 CSS值 描述 General auto浏览器根据当前内容决定指针样式
例如当是内容是文字时使用text样式default
默认指针，通常是箭头。 none无指针被渲染 链接及状态 context-menu
指针下有可用内容目录。只有windows中的IE 10有效。 help
指示帮助 pointer
悬浮于连接上时，通常为手 progress
程序后台繁忙，用户仍可交互 (与 wait不同).wait
程序繁忙（沙漏或表） 选择 cell
指示单元格可被选中 crosshair
交叉指针，通常指示位图中的框选 text
指示文字可被选中 vertical-text
指示垂直文字课被选中 拖拽 alias
复制或快捷方式将要被创建 copy
指示可复制 move
被悬浮的物体可被移动 no-drop
当前位置不能扔下
bug 275173Windows中 "no-drop 与not-allowed相同".not-allowed
不能执行 重设大小及滚动 all-scroll
元素可任意方向滚动 （平移）.
bug 275174Windows中, "all-scroll 与 move相同".col-resize
元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 row-resize
元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
n-resize
某条边将被移动。例如元素盒的东南角被移动时 使用se-resizee-resize
s-resize
w-resize
ne-resize
nw-resize
se-resize
sw-resize
ew-resize
指示双向重新设置大小 ns-resize
nesw-resize
nwse-resize
缩放 zoom-in
指示可被放大或缩小
zoom-out
- Mozilla特定关键字
-
Grab -moz-grab
元素可被抓起 不推荐在公开网页上使用这些指针。
使用自定图片指针会提供更好的浏览器兼容性
-moz-grabbing
元素被握住
示例
.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 }
规范
| 规范 | 状态 | 备注 |
|---|---|---|
| CSS Basic User Interface Module Level 3 cursor |
Candidate Recommendation | 增加了一些关键字，位置语法及url() |
| CSS Level 2 (Revision 1) cursor |
Recommendation | 首次定义 |
浏览器兼容性
| Feature | Chrome (WebKit) | Firefox (Gecko) | Internet Explorer | 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 | 1.0 (1.0) | 4.0 | 7.0 | 1.2 |
hand (just use pointer for this purpose) |
未实现 | 未实现 | 4.0 | 未实现 | 未实现 |
pointer, progress |
1.0 | 1.0 (1.0|1.7) | 6.0 | 7.x | 1.2 | 3.0 |
url() - See Using URL values |
1.0 (523) | 1.5 (1.8) On MacOs 4.0 (2.0). |
6.0 | 未实现 | 3.0 |
Positioning syntax for url() values |
? | (Yes) | 未实现 | ? | ? |
not-allowed, no-drop, vertical-text, all-scroll, col-resize, row-resize |
1.0 (522) | 1.5 (1.8) | 6.0 | 10.6 | 3.0 |
alias, cell, copy, ew-resize, ns-resize, nesw-resize, nwse-resize, context-menu |
1.0 (522 )[1] | 1.5 (1.8 )[1] | 未实现 | 10.6 [1] | 3.0 [2] |
none |
5.0 (533) | 3.0 (1.9) | 9.0 | 未实现 | 5.0 [2] |
inherit |
1.0 | 1.0 | 8.0 | 9.0 | 1.2 |
zoom-in, zoom-out |
1.0 (522) -webkit- | 1.0 (1.4) -moz- | 未实现 | 11.6 | 3.0 -webkit- |
[1] Windows中的Mozilla和WebKit不适用context-menu , Opera中可用。
[2] alias, cell, copy, none 在Windows Safari不适用, Mac中可用。
参见
- Using URL values for the cursor property
pointer-events- Webkit's cursor demos (including the extended ones:
zoom,zoom-out,grab,grabbing) - Cursor Property (MSDN)
- CSS 2.1 and CSS 3 cursor propery test