html 中鼠标样式由 css cursor 属性控制；推荐优先使用 w3c 标准的 12 个关键字值（如 pointer、default 等），避免 grab/grabbing 等兼容性差的值；自定义光标需注意尺寸≤128×128、必设 hotspot 和 fallback，且 url() 在 file:// 下被 chrome 拦截；cursor 不生效常见于 pointer-events: none、元素无交互语义、css 优先级覆盖或伪元素区域不匹配。
HTML 本身不直接设置鼠标样式，真正起作用的是 CSS 的 cursor 属性；写在 HTML 标签里（比如 style="cursor: pointer;"）只是内联方式应用该 CSS 属性，本质仍是 CSS 控制。
哪些 cursor 值是浏览器原生支持且兼容性好
不是所有值都能在所有浏览器稳定显示，尤其老版本 IE 或移动端。优先用 W3C 推荐的 12 个关键字值，它们跨浏览器表现一致：
-
default（默认箭头）、pointer（小手，最常用）、text（I 形光标）、wait（沙漏/转圈）、help（问号）、move（十字箭头） -
not-allowed（圆圈斜杠）、no-drop（禁止放置）、crosshair（精准十字线）、vertical-text（竖排文字光标） -
alias（创建别名）、copy（复制手势）——这两个在 Chrome/Firefox 支持良好，但 IE 完全不识别
像 grab / grabbing 这类“拟物化”值虽直观，但 Safari 旧版、部分安卓 WebView 会回退到 default，不能当作功能依赖。
自定义图片光标要注意的硬限制
用 url() 加载 .cur 或 .png 作为光标时，浏览器有明确限制：
- 尺寸必须 ≤ 128×128 像素（Chrome 严格限制，超大会静默失效）
- 必须指定热点坐标，例如：
cursor: url("hand.cur"), auto;—— 缺少后面的auto（或default等 fallback）会导致整个属性被忽略 - .png 不支持透明通道 hotspot 定义，.cur 文件才能精确设置点击热区；没指定 hotspot 时，浏览器默认取左上角 (0, 0)，容易造成点击偏移
- 路径必须可访问：本地 file:// 协议下，Chrome 会因安全策略阻止
url()加载，务必走 http(s) 服务预览
为什么加了 cursor: pointer 却没变手型
常见原因不是语法错，而是层叠或语义干扰：
- 父元素设置了
pointer-events: none，子元素再设cursor也无效 - 元素没有交互能力（比如
div未绑定事件、未设tabindex），某些浏览器（特别是 Safari）对非可聚焦/无事件元素的cursor渲染更保守 - CSS 优先级被覆盖：检查 computed styles，确认生效的是你写的那条规则，而不是某个通用选择器（如
* { cursor: default; }）在后面强行重置 - 伪元素（
::before/::after）上设了cursor，但实际悬停区域是父容器——光标样式只在伪元素渲染区域内生效，而它可能根本没占满父容器
真正难处理的是动态场景：比如拖拽中要切 grabbing，松开恢复 grab，但用户快速操作时状态同步容易出错；或者 SVG 内嵌元素的 cursor 受 pointer-events 和 vector-effect 交叉影响，调试起来得一层层查渲染树。这些细节不写具体代码很难暴露，但恰恰是线上问题高发区。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
