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

{{InteractiveExample("CSS Demo: cursor")}}

```css interactive-example-choice cursor: help;


```css interactive-example-choice
cursor: wait;

```css interactive-example-choice cursor: crosshair;


```css interactive-example-choice
cursor: not-allowed;

```css interactive-example-choice cursor: zoom-in;


```css interactive-example-choice
cursor: grab;

```html interactive-example

Move over this element to see the cursor style. 


```css interactive-example
#example-element {
  display: flex;
  background-color: #1766aa;
  color: white;
  height: 180px;
  width: 360px;
  justify-content: center;
  align-items: center;
  font-size: 14pt;
  padding: 5px;
}

语法

/* 关键字值 */
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 属性为零个或多个\值，它们之间用逗号分隔，最后必填一个关键字值。每个\指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则返回下一个图像，如果无法加载图像或未指定图像，则使用关键字值代表的指针类型。

每个\后面都可选跟一对空格分隔的数字\\表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置)，位置相对于图标的左上角。

例如，下面的例子使用\值指定两个图像，为第二个图像提供\\坐标，如果两个图像都无法加载，则返回progress关键字值：

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

值

  • <url>
    • : url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个{{cssxref("<url>")}}值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。详情参见cursor 属性中使用 URL 值。
  • <x> <y> {{experimental_inline}}
    • : 可选 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

语法形式

{{csssyntax}}

注意事项

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

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

示例

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

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