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;
浏览器支持
|
|
|
|
|
浏览器都支持
cursor
|
||||
语法：
cursor ：[ <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
|
浏览器根据当前内容决定指针样式
|
|
default
|
|
默认指针，通常是箭头。 | |
none
|
无指针被渲染 | ||
| 链接及状态 |
context-menu
|
|
指针下有可用内容目录。 |
help
|
|
指示帮助 | |
pointer
|
|
悬浮于连接上时，通常为手 | |
progress
|
|
程序后台繁忙，用户仍可交互(与
wait相反
).
|
|
wait
|
|
程序繁忙，用户不可交互(与
progress相反
).图标一般为沙漏或者表。
|
|
| 选择 |
cell
|
|
指示单元格可被选中 |
crosshair
|
|
交叉指针，通常指示位图中的框选 | |
text
|
|
指示文字可被选中 | |
vertical-text
|
|
指示垂直文字可被选中 | |
| 拖拽 |
alias
|
|
复制或快捷方式将要被创建 |
copy
|
|
指示可复制 | |
move
|
|
被悬浮的物体可被移动 | |
no-drop
|
|
当前位置不能扔下
bug 275173Windows或Mac OS X中"no-drop 与not-allowed相同". |
|
not-allowed
|
|
不能执行 | |
grab
|
|
可抓取 译者注:grab和grabbing在比较后期才被支持，见浏览器兼容表 |
|
grabbing
|
|
抓取中 | |
| 重设大小及滚动 |
all-scroll
|
|
元素可任意方向滚动（平移）.
bug 275174Windows中," all-scroll 与 move相同 ". |
col-resize
|
|
元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头 | |
row-resize
|
|
元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头 |
|
n-resize
|
|
某条边将被移动。例如元素盒的东南角被移动时
使用se-resize
|
|
e-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
|
|
例子
.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 }