cursor - CSS（层叠样式表） 编辑

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

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request.

语法

/* 关键字值 */
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(…), …，指向图片文件。用大于一个<url>值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非URL后备值。详情参见cursor属性中使用URL值。

<x> <y>

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

关键字值

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

类型	CSS值		描述
General	auto		浏览器根据当前内容决定指针样式 例如当是内容是文字时使用text样式
	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

语法形式

[ [ <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 ] ]

注意事项

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

查阅 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;
}

规范

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• Using URL values for the cursor property
• pointer-events
• url() function
• Webkit's cursor demos (including the extended ones: zoom, zoom-out, grab, grabbing)
• Cursor Property (MSDN)
• CSS 2.1 and CSS 3 cursor propery test