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

语法

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