cursor属性合法值包括default、text、move、not-allowed、wait、help、pointer等语义化取值，支持url()自定义光标（需fallback、热区坐标及合理尺寸），移动端应通过@media(hover:hover)and(pointer:fine)条件启用。
cursor 属性支持哪些合法值
直接写 cursor: pointer 是最常用的，但它的合法值远不止这一个。浏览器原生支持的包括 default、text、move、not-allowed、wait、help 等语义化取值，每个都对应系统级光标样式，无需额外资源。
使用时注意：不同操作系统对同一值的渲染略有差异（比如 zoom-in 在 macOS 和 Windows 上的图标细节不同），但行为一致。避免用 cursor: hand —— 这是 IE 旧语法，现代浏览器已不识别。
自定义光标图片怎么写才生效
用 url() 加载自定义光标时，必须配一个 fallback 值，否则在图片加载失败或不支持时会退化为默认箭头，而不是你期望的 pointer：
cursor: url("custom-cursor.svg"), pointer;
关键细节：
立即学习“前端免费学习笔记（深入）”；
-
url()路径必须可访问，且文件格式推荐.svg或.cur（PNG 在部分浏览器中需指定尺寸） - 图像尺寸建议 ≤ 128×128px；过大可能被截断或忽略
- 必须指定热区坐标（hotspot），否则光标点击点默认在左上角：
url("c.cur") 4 4, pointer表示热区在距左 4px、距上 4px 处 - 某些浏览器（如 Safari）对本地文件协议（
file://）下的自定义光标有严格限制，开发时建议走本地服务器
hover 状态下改 cursor 为什么没反应
常见原因是 CSS 优先级或选择器覆盖问题。比如父元素设置了 cursor: default，子元素即使写了 cursor: pointer 也可能被继承压制。
排查要点：
- 检查是否被
!important强制锁定（尤其第三方 UI 库常用） - 确认 hover 伪类是否正确绑定到目标元素，而非其祖先或后代
- 某些 inline 元素（如
）默认不响应 hover，需加display: inline-block或类似声明 - 如果元素有
pointer-events: none，整个光标交互都会失效，包括cursor变化
移动端要不要设 cursor
绝大多数情况下不用。iOS 和 Android 浏览器基本忽略 cursor 样式，因为没有鼠标硬件。强行设置不会报错，但毫无效果，还可能干扰触摸反馈逻辑。
如果项目需兼顾桌面与移动，推荐用媒体查询隔离：
@media (hover: hover) and (pointer: fine) {
.button { cursor: pointer; }
}
这个条件确保只在真正支持悬停+精细指针（即鼠标/触控笔）的设备上启用 cursor，既干净又准确。
别忘了：光标只是视觉提示，真正的交互意图必须由 role、tabindex、键盘焦点和 ARIA 状态共同支撑——样式只是最后一层糖衣。
