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 }