--- title: cursor slug: Web/CSS/cursor tags: - CSS - CSS Reference - NeedsBrowserCompatibility - NeedsMobileBrowserCompatibility - NeedsTranslation - TopicStub translation_of: Web/CSS/cursor ---
{{CSSRef}}

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

{{EmbedInteractiveExample("pages/css/cursor.html")}}

语法

/* 关键字值 */
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;

值

<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 当前位置不能扔下
{{ bug("275173") }}Windows或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 元素可任意方向滚动 （平移）.
{{ bug("275174") }}Windows中, "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("cursor")}}

注意事项

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

查阅 {{anch("Browser compatibility")}} 表格来获取指针大小的限制信息。

示例

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

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

规范

规范 状态 备注
{{ SpecName('CSS3 UI', '#cursor', 'cursor') }} {{ Spec2('CSS3 UI') }} 增加了一些关键字，url()的位置语法
{{ SpecName('CSS2.1', 'ui.html#cursor-propsy', 'cursor') }} {{ Spec2('CSS2.1') }} 首次定义

浏览器兼容性

{{Compat("css.properties.cursor")}}

参见