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

尝试一下

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<section>  <div>    Move over this element to see the cursor style.  </div></section>

#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 属性为零个或多个<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		当前位置不能扔下 Firefox bug 275173Windows 或 Mac OS X 中 "no-drop 与 not-allowed 相同".
	not-allowed		不能执行
	grab		可抓取 译者注:grab 和 grabbing 在比较后期才被支持，见浏览器兼容表
	grabbing		抓取中
重设大小及滚动	all-scroll		元素可任意方向滚动（平移）. Firefox 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

语法形式

cursor =
[<cursor-image> ,]*<cursor-predefined>

<cursor-image> =
[<url>|<url-set>][<number>{2}]?

<cursor-predefined> =
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

注意事项

尽管规范没有为游标定义任何大小限制，但是不同的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;}

规范

浏览器兼容性

参见

• 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