【CSS: cursor】鼠标光标指针样式大全

浏览器内置指针样式：

标了红色 * 号的为我认为的常用指针样式。

cursor: auto; （默认值）	浏览器根据当前内容自动决定指针样式； 例如当内容是文字时使用 text 样式
cursor: default;	默认指针，通常是箭头。
cursor: none;	不渲染指针！
cursor: context-menu;	(该指针经测试没效果？)指针下有可用内容目录。配套使用案例如下： 【html+js+css】前端浏览器自定义 右键菜单显示_oumae-kumiko的博客-CSDN博客
cursor: help;	* 指示帮助。
cursor: pointer;	* 悬浮于该元素上时，通常为手。
cursor: progress;	程序后台繁忙，用户仍可交互 (与wait 相反).
cursor: wait;	* 程序繁忙，用户不可交互 (与progress 相反).图标一般为沙漏或者表。
cursor: cell;	指示单元格可被选中
cursor: crosshair;	* 交叉指针，通常指示位图中的框选
cursor: text;	指示文字可被选中
cursor: vertical-text;	指示垂直文字可被选中
cursor: alias;	复制或快捷方式将要被创建
cursor: copy;	指示可复制
cursor: move;	* 被悬浮的物体可被移动
cursor: no-drop;	* 当前位置不能扔下
cursor: not-allowed;	* 不能执行
cursor: grab;	可抓取
cursor: grabbing;	抓取中
cursor: all-scroll;	元素可任意方向滚动（平移）
cursor: col-resize;	* 元素可被重设宽度。通常被渲染为中间有一条竖线分割的左右两个箭头
cursor: row-resize;	* 元素可被重设高度。通常被渲染为中间有一条横线分割的上下两个箭头
cursor: zoom-in;	* 指示可被放大或缩小
cursor: zoom-out;	* 指示可被放大或缩小
cursor: ns-resize;	* 指示高双向重新设置大小
cursor: ew-resize;	* 指示宽双向重新设置大小
cursor: nwse-resize;	* 指示宽、高双向重新设置大小（左上、右下）
cursor: nesw-resize;	* 指示宽、高双向重新设置大小（右上、左下）

---

其他属性：

/* 全局属性 */cursor: inherit;cursor: initial;cursor: unset;

---

url() ： 自定义鼠标指针！

除了浏览器提供的鼠标样式，我们还可以借助 cursor: url() 的特性，即可实现定制自己的鼠标样式！

/* 使用 URL，并提供一个关键字值作为备用 */cursor: url(hand.cur), pointer; /* URL 和 xy 的坐标偏移值，最后提供一个关键字值作为备用 */cursor:  url(cursor1.png) 4 12, auto;cursor:  url(cursor2.png) 2 2, pointer;

cursor 属性为零个或多个值，多个url()的时候它们之间用逗号分隔，最后必填一个cursor的关键字值。每个指向一个图像文件。浏览器将尝试加载指定的第一个图像，如果无法加载则继续加载下一个图像，如果都无法加载图像或未指定图像，则使用关键字值代表的指针类型。

每个后面都可选跟一对空格分隔的数字表示偏移。它们用来设置指针的热点 (即自定义图标的实际点击位置)，位置相对于图标的左上角。

多 `url()` 例子：

cursor: url(one.svg), url(two.svg) 5 5, progress;

<url>
url(…)或者逗号分隔的url(…), url(…), …，指向图片文件。用大于一个值提供后备，以防某些指针图片类型不被支持。最后必须提供一个非 URL 后备值。

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

自定义、定制鼠标指针例子：

【css】自定义鼠标光标指针样式-前端_oumae-kumiko的博客-CSDN博客

本文转自 https://blog.csdn.net/lijiahui_/article/details/130946684，如有侵权，请联系删除。