CSS `cursor` 属性

说明

cursor CSS 属性指定当指针放在元素上时要显示的光标类型。

下表总结了此属性的使用上下文和版本历史记录。

默认值：	`auto`
适用于：	所有元素
继承：	Yes
动画：	No. 参见动画属性。
版本：	CSS 2, 3

语法

属性的语法如下：

cursor:

[url(address of cursor file),]^{0 or more times} | auto | default | none | context-menu | help | pointer | progress | wait | cell | crosshair | text | vertical-text | alias | copy | move | no-drop | not-allowed | grab | grabbing | 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 | initial | inherit

下面的例子展示了 cursor 属性的作用。

示例

Try this code »

h1 {
    cursor: copy;
}
p {
    cursor: help;
}
a {
    cursor: url("custom.gif"), url("custom.cur"), default;
}

cursor 属性处理以逗号分隔的用户定义光标值列表，后跟"通用光标"。如果第一个光标指定错误或找不到，将使用逗号分隔列表中的下一个光标，依此类推，直到找到可用的光标。

如果用户定义的光标均无效或浏览器不支持，则将使用列表末尾的通用光标。了解更多。

属性值

下表描述了该属性的值。

值	Look	说明
General
`auto`		浏览器根据当前上下文确定要显示的光标。例如。悬停文本时相当于文本。这是默认设置。
`default`		平台的默认光标，不考虑上下文，通常是一个箭头。
`none`		不渲染光标。
`initial`		将此属性设置为其默认值。
`inherit`		如果指定，则关联元素采用其父元素 `cursor` 属性的计算值。
链接和状态光标
`context-menu`		表示上下文菜单可用。
`help`		表示有帮助。
`pointer`		表示链接的光标，通常是伸出食指的手。
`progress`		进度指示器。程序正在执行一些处理，但用户仍然可以与界面交互（与 `wait` 不同）。
`wait`		表示程序正忙，用户应等待。
选择光标
`cell`		表示可以选择一个单元格（或一组单元格）。
`crosshair`		一个简单的十字准线。常用于表示位图中的选择。
`text`		表示可以选择的文本，通常是 I-beam。
`vertical-text`		表示可以选择竖排文字，横着的工字梁。
拖放光标
`alias`		表示要创建别名或快捷方式。
`copy`		表示可以复制的东西。
`move`		表示悬停的对象可以移动。
`no-drop`		表示被拖拽的项不能放在当前位置。
`not-allowed`		表示不能做某事。
调整大小和滚动光标
`all-scroll`		表示可以向任意方向滚动（平移）。
`col-resize`		表示该列可以水平调整大小。
`row-resize`		表示该行可以垂直调整大小。
`n-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`		表示可以缩小。
`grab`		表示可以抓取（拖动移动）的东西。
`grabbing`		表示抓到了东西。