本文详细解析 CSS 中用于定义光标外观（cursor）和控制事件响应（pointer-events）的属性。涵盖语法、常用值、自定义光标、事件穿透技巧及最佳实践，助你提升网页交互体验与开发效率。

一、Cursors（光标样式）

Cursor（光标）是 CSS 中用于定义鼠标指针悬停在元素上时显示样式的属性。它通过视觉反馈告诉用户当前元素的交互特性，是提升用户体验的重要细节。

1.1 基本语法

选择器 {
	cursor: 样式值;
}

1.2 常用光标样式

基础光标

属性值	描述	图例
default	默认箭头光标
auto	浏览器根据上下文自动选择合适光标
inherit	继承父元素的光标样式
none	无指针被渲染

选择类

属性值	描述	图例
cell	指示单元格可被选中
vertical-text	指示垂直文字可被选中
text	文本选择光标（I 形，常用于输入框）
crosshair	十字准心光标,通常指示位图中的框选

拖拽类

属性值	描述	图例
alias	复制或快捷方式将要被创建
copy	指示可复制
move	四向箭头，表示元素可拖动
no-drop	指示拖放区域或特定操作不可用
not-allowed	不允许执行
grab	可抓取
grabbing	抓取中

链接与状态类

属性值	描述	图例
pointer	手形指针（常用于链接、按钮等可点击元素）
wait	等待/加载光标（通常是旋转的沙漏或圆圈）
progress	箭头 + 旋转图标，表示正在处理但仍可交互
help	带问号的箭头，表示可获取帮助
context-menu	指针下有可用内容目录

尺寸调整类

属性值	描述	图例
e-resize	水平方向调整（东箭头）
w-resize	水平方向调整（西箭头）
n-resize	垂直方向调整（北箭头）
s-resize	垂直方向调整（南箭头）
ne-resize	对角线调整
nw-resize	对角线调整
se-resize	对角线调整
sw-resize	对角线调整
ew-resize	水平双向箭头
ns-resize	垂直双向箭头
nesw-resize	对角线双向箭头
nwse-resize	对角线双向箭头
all-scroll	元素可任意方向滚动
col-resize	元素可被重设宽度
row-resize	元素可被重设高度

绽放类

属性值	描述	图例
zoom-in	指示可被放大或缩小
zoom-out	指示可被放大或缩小

自定义光标

除了系统预设光标，还可以使用自定义图像：

.custom-cursor {
	cursor: url('cursor.png') 10 10, auto;
	/* 10 10 是光标的热点位置（即点击生效的坐标点） */
}

1.3 应用场景示例

/* 链接和按钮使用手形指针 */
a,
button {
	cursor: pointer;
}

/* 输入框显示文本选择光标 */
input[type="text"],
textarea {
	cursor: text;
}

/* 可调整大小的元素 */
.resize-handle {
	cursor: nwse-resize;
}

/* 加载状态 */
.loading-overlay {
	cursor: wait;
}

二、Pointers（指针事件）

Pointer-events 是 CSS 中控制元素如何响应指针事件（如鼠标点击、悬停、拖拽等）的属性。它决定了元素是否能接收事件，以及事件是否会穿透到下方元素。

2.1 基本语法

选择器 {
	pointer-events: 事件值;
}

2.2 常用指针事件值

• 注：还有 visiblePainted、visibleFill 等 SVG 专用值，主要用于控制 SVG 图形的事件响应区域。

2.3 应用场景示例

示例一：禁用元素交互

.disabled {
	pointer-events: none;
	opacity: 0.6;
	/* 视觉上表示禁用状态 */
}

示例二：创建可点击穿透的覆盖层

.overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	pointer-events: none;
	/* 点击会穿透到下方内容 */
}

.overlay-button {
	pointer-events: auto;
	/* 覆盖层上的按钮可正常点击 */
}

示例三：优化装饰性元素性能

.decorative-bg,
.animated-particles {
	pointer-events: none;
	/* 非交互元素无需响应事件，提升性能 */
}

三、Cursors 与 Pointers 的配合使用

虽然 Cursor 和 Pointer-events 功能不同，但它们经常配合使用来创建特定的交互体验：

/* 视觉上可点击但实际不可交互的元素 */
.visual-button {
	cursor: pointer;
	/* 显示手形指针 */
	pointer-events: none;
	/* 实际不可点击 */
}

/* 禁用状态的完整实现 */
.disabled-button {
	cursor: not-allowed;
	/* 视觉上明确表示禁用 */
	pointer-events: none;
	/* 实际禁用交互 */
	opacity: 0.6;
	/* 进一步强化禁用视觉效果 */
}

四、最佳实践

4.1 关于 Cursor

1. 保持一致性：相同功能的元素使用统一的光标样式。

2. 提供明确反馈：用光标样式直观表达元素的交互特性。

3. 谨慎使用自定义光标：避免跨浏览器兼容性问题和用户混淆。

4. 考虑可访问性：确保光标样式不影响用户对元素功能的理解。

4.2 关于 Pointer-events

1. 慎用 pointer-events: none：可能导致屏幕阅读器无法识别元素。

2. 提供视觉反馈：配合 opacity、border 等属性增强用户理解。

3. 注意事件传播：禁用子元素事件时，确保父元素能正确处理。

4. 测试兼容性：不同浏览器对 Pointer-events 的支持存在细微差异。

五、浏览器兼容性

5.1 Cursor

• 基础光标样式：所有现代浏览器均支持。
• 自定义光标：支持 IE 9+、Chrome、Firefox、Safari 等主流浏览器。
• 高级光标（如 grab、grabbing）：在老旧浏览器中可能不受支持。

5.2 Pointer-events

• pointer-events: none：支持 IE 11+、Chrome、Firefox、Safari 等主流浏览器。
• SVG 专用值：不同浏览器支持程度略有差异。

通过 Can I Use 实时查阅 cursor、pointer-events 的浏览器兼容性详情，获取最新、精准的兼容数据。

总结

CSS 的 Cursor 和 Pointer-events 是提升用户交互体验的重要工具：

• Cursor 关注 视觉反馈 ，通过改变鼠标指针样式，直观告诉用户元素的交互特性。
• Pointer-events 控制 交互行为 ，决定元素是否响应指针事件以及事件如何传播。

合理搭配使用这两个属性，可以创造出既美观又实用的用户界面，同时需要注意保持一致性、可访问性和跨浏览器兼容性。