cursor

试一试

cursor: help;

cursor: wait;

cursor: crosshair;

cursor: not-allowed;

cursor: zoom-in;

cursor: grab;

<section class="default-example container" id="default-example">
  <div id="example-element">
    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;
}

语法

/* Keyword value */
cursor: auto;
cursor: pointer;
/* … */
cursor: zoom-out;

/* URL with mandatory keyword fallback */
cursor: url("hand.cur"), pointer;

/* URL and coordinates, with mandatory keyword fallback */
cursor:
  url("cursor_1.png") 4 12,
  auto;
cursor:
  url("cursor_2.png") 2 2,
  pointer;

/* URLs and fallback URLs (some with coordinates), with mandatory keyword fallback */
cursor:
  url("cursor_1.svg") 4 5,
  url("cursor_2.svg"),
  /* …, */ url("cursor_n.cur") 5 5,
  progress;

/* Global values */
cursor: inherit;
cursor: initial;
cursor: revert;
cursor: revert-layer;
cursor: unset;

cursor 属性指定为零个或多个以逗号分隔的 <url> 值，后跟一个强制性的关键字值。每个 <url> 都应指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果失败则回退到下一个，如果无法加载任何图像（或未指定任何图像）则回退到关键字值。

每个 <url> 后面可以选择跟一对以空格分隔的数字，它们设置光标热点相对于图像左上角的 <x> 和 <y> 坐标。

值

<url> 可选

一个 url() 或逗号分隔的列表 url(), url(), …，指向一个图像文件。可以提供多个 <url> 作为回退，以防某些光标图像类型不受支持。非 URL 回退（一个或多个关键字值）必须位于回退列表的末尾。

<x>, <y> 可选

可选的 x 和 y 坐标，指示光标热点；光标内被指向的精确位置。

数字以图像像素为单位。它们相对于图像的左上角，对应于 0 0，并被限制在光标图像的边界内。如果未指定这些值，则可以从文件本身读取，否则将默认为图像的左上角。

keyword

必须指定关键字值，指示要使用的光标类型，或在所有指定图标加载失败时要使用的备用光标。

可用关键字列在下表中。除了表示无光标的 none 之外，还有一个图像显示了以前光标的渲染方式。您可以将鼠标悬停在表格行上，以查看不同光标关键字值在您当前浏览器上的效果。

类别	关键字	示例	描述
通用	auto		用户代理将根据当前上下文确定要显示的光标。例如，悬停在文本上时等同于 text。
	default		平台相关的默认光标。通常是一个箭头。
	none		不渲染光标。
链接和状态	context-menu		可用上下文菜单。
	help		提供帮助信息。
	pointer		光标是指针，指示链接。通常是指向的手的图像。
	progress		程序在后台繁忙，但用户仍然可以与界面交互（与 wait 不同）。
	wait		程序繁忙，用户无法与界面交互（与 progress 不同）。有时是沙漏或手表的图像。
Selection	cell		可以选择表格单元格或一组单元格。
	crosshair		十字光标，通常用于指示位图中的选择。
	文本		文本可以被选择。通常是 I 形光标。
	vertical-text		可以选择垂直文本。通常是横向的 I 形光标。
拖放	alias		将创建别名或快捷方式。
	copy		将复制某些内容。
	move		将移动某些内容。
	no-drop		项目不能放置在当前位置。 Firefox bug 275173：在 Windows 和 macOS 上，no-drop 与 not-allowed 相同。
	not-allowed		请求的操作不会执行。
	grab		可以抓取（拖动以移动）某些内容。
	grabbing		正在抓取（拖动以移动）某些内容。
调整大小和滚动	all-scroll		可以向任何方向滚动（平移）某些内容。 Firefox bug 275174：在 Windows 上，all-scroll 与 move 相同。
	col-resize		项目/列可以水平调整大小。通常渲染为左右指向的箭头，中间有一条垂直线分隔。
	row-resize		项目/行可以垂直调整大小。通常渲染为上下指向的箭头，中间有一条水平线分隔。
	n-resize		将移动某个边缘。例如，当移动从框的东南角开始时，使用 se-resize 光标。 在某些环境中，会显示等效的双向调整大小光标。例如，n-resize 和 s-resize 与 ns-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       

用法说明

图标大小限制

虽然规范不限制 cursor 图像大小，但 用户代理通常会限制它们以避免潜在的滥用。例如，在 Firefox 和 Chromium 中，光标图像默认限制为 128x128 像素，但建议将光标图像大小限制为 32x32 像素。使用大于用户代理最大支持大小的图像进行光标更改通常会被忽略。

支持的图像文件格式

规范要求用户代理支持 PNG 文件、包含自然大小的安全静态模式下的 SVG v1.1 文件，以及它们为其他属性中的图像支持的任何其他非动画图像文件格式。桌面浏览器也广泛支持 .cur 文件格式。

规范进一步指出，用户代理也应该支持包含自然大小的安全动画模式下的 SVG v1.1 文件，以及它们为其他属性中的图像支持的任何其他动画图像文件格式。用户代理可以支持不包含自然大小的静态和动画 SVG 图像。

iPadOS

iPadOS 支持触控板和鼠标等指针设备。默认情况下，iPad 光标显示为圆形，唯一会改变指针外观的受支持值是 text。

其他说明

与工具栏区域相交的光标更改通常被阻止，以避免欺骗。

示例

设置光标类型

.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

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

规范

浏览器兼容性

另见

• pointer-events
• <url> 类型
• SVG cursor 属性