必须用cursor: url("x.cur"), fallback;格式，支持.cur/.png（需透明及热点坐标），路径相对CSS文件，须设fallback关键字且移动端禁用。
如何用 cursor CSS 属性替换默认鼠标指针
直接改样式表里的 cursor 就能换指针，不需要 JS 或额外库。浏览器原生支持，但值不是全都能用，有些只在特定场景生效。
-
cursor: pointer最常用，点击区域必须是可交互元素（比如<button>或带onclick的<div>），否则用户可能感知不到变化 -
cursor: url("hand.cur"), auto可加载自定义光标文件，但必须提供 fallback（逗号后那个auto），否则在不支持或路径出错时会显示空白 - 本地 .cur 或 .png 文件路径要相对准确，比如放在
./assets/cursor.hand.png，就写url("./assets/cursor.hand.png")，不能漏掉引号和协议前缀 - 部分系统（如 macOS Safari）对非标准 cursor 值（如
grab、zoom-in）支持不稳定，建议搭配cursor: move作降级
为什么设置了 cursor 却没生效
常见原因不是语法错，而是 CSS 优先级或继承干扰。指针样式会从父元素继承，且被 !important 或更具体的选择器覆盖。
- 检查是否被父容器的
cursor: none或其他值“罩住”，试试加!important快速验证（上线前得去掉） - 确保目标元素有明确尺寸（比如
width/height或内容撑开），空<div>默认宽高为 0，鼠标根本 hover 不上 - Chrome 和 Firefox 对
url()光标的尺寸有限制：推荐 32×32 像素，超大会被截断或忽略；.png 需透明背景，且必须指定热点坐标（url(...), 16 16表示中心点） - 如果用了
pointer-events: none，无论cursor设成啥都没反应——这是故意禁用交互，不是 bug
用 JS 动态切换 cursor 的实际场景
纯 CSS 能覆盖大部分需求，但拖拽、编辑态切换、或响应式设备适配时，JS 控制更灵活。
- 监听
mousedown后临时加 class：document.body.classList.add("is-dragging")，再用 CSS 定义.is-dragging { cursor: grabbing !important; } - 避免直接操作
style.cursor，因为内联样式优先级太高，后续 CSS 很难覆盖；统一走 class 切换更可控 - 移动端没有鼠标，
cursor属性会被忽略，别为 touch 设备白费功夫；真要区分可用@media (hover: hover)媒体查询 - 注意性能：不要在
mousemove里频繁设cursor，触发重绘；用事件委托 + 节流，或靠 CSS :hover 自动处理
兼容性与容易被忽略的细节
IE11 支持基础值（pointer、default、text），但不支持 zoom-in 或自定义 url；Safari 对 hotspot 坐标解析较严格，差一位可能偏移。
立即学习“前端免费学习笔记（深入）”；
- 自定义光标文件大小别超 128KB，否则某些浏览器加载失败不报错，只默默回退到 fallback
-
cursor: help在部分 Windows 系统显示问号图标，在 macOS 显示带问号的圆圈，视觉不一致但语义正确，不必强求统一 - 如果页面用 Web Components 或 Shadow DOM，
cursor不会穿透 shadow boundary，得在组件内部单独设置 - 无障碍方面：改变指针是视觉提示，不能替代 ARIA 属性（如
aria-label或role="button"），两者要配合用
