button元素加cursor: pointer无效的根本原因是被其他样式或属性压制：父元素pointer-events: none、伪按钮缺少tabindex/role、UI库CSS覆盖、父容器cursor继承、JS内联样式覆盖，或按钮处于disabled状态。
button 元素加 cursor: pointer 为什么没反应
根本原因不是写错了，而是被其他样式或属性压制了。最常见的是父元素设置了 pointer-events: none，子元素再设 cursor 也无效；或者按钮本身是 <div> 伪按钮但没加 <code>tabindex 或 role="button"，浏览器不认为它可交互，直接忽略光标提示。
还有三类高频干扰：
-
button被第三方 UI 库的 CSS 规则覆盖（比如button { cursor: default !important; }） - 父容器（如
或某个<div class="modal">）设了 <code>cursor: default，子元素没显式重置，就继承过去 - 用了内联样式
style="cursor: pointer"，但 JS 后续又通过element.style.cursor = "auto"覆盖掉了 - 显式加
!important提权：button:disabled { cursor: not-allowed !important; } - 关键一步：补上
pointer-events: auto;，否则鼠标“穿”过按钮，根本触发不了光标变化 - Chrome 在
file://协议下会拦截url("hand.cur")，导致光标直接消失 —— 必须用本地服务器预览（npx serve、python -m http.server或 VS Code Live Server） - 路径是相对于 HTML 文件位置，不是 CSS 文件位置；比如 HTML 和
arrow.cur同级，就得写cursor: url('arrow.cur'), auto; - .png 光标必须手动指定热点坐标：
cursor: url('hand.png') 4 4, pointer;，漏写4 4就会点击偏移；.cur 文件自带热区，更省心 - 尺寸超 32×32px 容易被 Chrome 静默降级为默认光标，别贪大
- 预先定义好状态类：
.btn--loading { cursor: wait; }、.btn--dragging { cursor: grabbing; } - JS 只负责增删 class：
btn.classList.add('btn--loading')，不用碰style.cursor - 禁用状态也走 class：
.btn.is-disabled { cursor: not-allowed; pointer-events: auto; }，避免依赖原生disabled属性的不可靠行为
验证方式：打开开发者工具 → 选中按钮 → 切到 Computed 标签页，看 cursor 最终值是不是 pointer。不是，就说明被覆盖了。
禁用按钮（disabled）上 cursor: not-allowed 失效怎么办
浏览器对原生 <button disabled></button> 有强制样式覆盖，直接写 button:disabled { cursor: not-allowed; } 很可能不生效，尤其在 Chrome/Edge 中。
立即学习“前端免费学习笔记（深入）”；
必须同时满足两个条件：
注意：:disabled 匹配的是真实禁用状态（包括 JS 动态设置 el.disabled = true），而 button[disabled] 只匹配属性存在，后者在动态禁用时会失效。
用 url() 加载自定义光标图片总不显示
90% 是路径、格式或尺寸问题，不是代码写错。
本地开发时最常踩的坑：
务必提供 fallback 值，url('x.cur'), auto 缺了逗号后的 auto 整个声明会被忽略。
JS 动态切换光标时容易留残留或冲突
直接操作 element.style.cursor 是最大陷阱。比如在 mouseover 里设 wait，mouseout 忘清，鼠标移出后光标就卡住；或者和 CSS 规则打架，结果样式层叠混乱。
正确做法是用 class 控制：
特别注意移动端：Safari 对禁用按钮的 cursor 完全无视，这时光标样式不是重点，真正要防的是误触 —— 加 touch-action: none 比改光标更有效。
