cursor

cursor CSS 属性设置光标的类型（如果有），在鼠标指针悬停在元素上时显示相应样式。

尝试一下

语法

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关键字值：

css
cursor:
  url(one.svg),
  url(two.svg) 5 5,
  progress;

值

<url>

url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个<url>值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。详情参见cursor 属性中使用 URL 值。

<x> <y>

可选 x，y 坐标。两个小于 32 的无单位非负数。

关键字值

鼠标悬浮于值上可实时演示

类型 CSS 值 例子 描述
General auto

浏览器根据当前内容决定指针样式
例如当内容是文字时使用 text 样式

default default.gif 默认指针，通常是箭头。
none 无指针被渲染
链接及状态 context-menu context-menu.png 指针下有可用内容目录。
help help.gif 指示帮助
pointer pointer.gif 悬浮于连接上时，通常为手
progress progress.gif 程序后台繁忙，用户仍可交互 (与wait 相反).
wait wait.gif 程序繁忙，用户不可交互 (与progress 相反).图标一般为沙漏或者表。
选择 cell cell.gif 指示单元格可被选中
crosshair crosshair.gif 交叉指针，通常指示位图中的框选
text text.gif 指示文字可被选中
vertical-text vertical-text.gif 指示垂直文字可被选中
拖拽 alias alias.gif 复制或快捷方式将要被创建
copy copy.gif 指示可复制
move move.gif 被悬浮的物体可被移动
no-drop no-drop.gif 当前位置不能扔下
Firefox bug 275173Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同".
not-allowed not-allowed.gif 不能执行
grab grab.gif

可抓取

译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表
grabbing grabbing.gif 抓取中
重设大小及滚动 all-scroll all-scroll.gif 元素可任意方向滚动（平移）.
Firefox bug 275174Windows 中，"all-scroll 与 move 相同".
col-resize col-resize.gif 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
row-resize row-resize.gif

元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
n-resize Example of a resize towards the top cursor 某条边将被移动。例如元素盒的东南角被移动时使用 se-resize
e-resize Example of a resize towards the right cursor
s-resize Example of a resize towards the bottom cursor
w-resize Example of a resize towards the left cursor
ne-resize Example of a resize towards the top-right corner cursor
nw-resize Example of a resize towards the top-left corner cursor
se-resize Example of a resize towards the bottom-right corner cursor
sw-resize Example of a resize towards the bottom-left corner cursor
ew-resize 3-resize.gif 指示双向重新设置大小
ns-resize 6-resize.gif
nesw-resize 1-resize.gif
nwse-resize 4-resize.gif
缩放 zoom-in zoom-in.gif

指示可被放大或缩小
zoom-out zoom-out.gif

语法形式

cursor = 
  [ [ <url> | <url-set> ] [ <x> <y> ]? ]#? [ 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 ]  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

注意事项

尽管规范没有为游标定义任何大小限制，但是不同的user agents可能进行了限制。使用超出浏览器支持的大小范围的图像进行的光标更改通常只会被忽略。

查阅浏览器兼容性表格来获取指针大小的限制信息。

示例

css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/* A fallback keyword value is required when using a URL */
.baz {
  cursor: url("hyper.cur"), auto;
}

规范

Specification
CSS Basic User Interface Module Level 4
# cursor

浏览器兼容性

BCD tables only load in the browser

参见