按钮鼠标变手型需用css cursor:pointer实现，失效常见原因包括pointer-events:none、缺乏交互语义、css优先级覆盖、hover未重置及内联样式冲突；推荐class统一管理并注意本地chrome的cur文件限制。
按钮上鼠标变手型不是靠 HTML 属性控制的，而是必须用 CSS 的 cursor 属性设为 pointer；直接写 style="cursor: pointer" 能快速验证，但长期维护建议走 class 控制。
button 元素加 cursor: pointer 为什么有时不生效
常见失效不是因为写错了，而是被其他样式或属性压制了：
-
pointer-events: none父元素设置了这个，子元素再怎么设cursor都没反应 - 按钮本身没有交互语义（比如是
<div> 伪按钮但没加 <code>tabindex或role="button"），部分浏览器会忽略 cursor 提示 - CSS 优先级问题：某个更高权重的规则（比如 ID 选择器或
!important）把cursor覆盖成了default或别的值 - :hover 伪类里没写
cursor，而父容器设置了cursor: wait这类全局值，又没在按钮上显式重置
用 class 统一管理比内联 style 更可靠
内联写 style="cursor: pointer" 看似省事，但容易和 JS 动态改样式冲突，也难统一收口。推荐这样组织：
.btn {
cursor: pointer;
}
.btn:disabled,
.btn.is-disabled {
cursor: not-allowed;
}
.drag-handle {
cursor: move;
}
好处是：
- 可批量控制，比如一键禁用所有按钮的手型提示
- 配合 JS 切换 class（如
element.classList.add("is-loading")）能自然联动cursor: wait - 避免
body.style.cursor = "grabbing"这种直接操作 DOM 样式的写法——鼠标移出窗口后容易残留
自定义图片光标要绕开 Chrome 的 file:// 限制
本地双击打开 HTML 文件时，Chrome 会拦截 url("hand.cur") 这类路径，导致 fallback 也不触发，光标直接消失。解决方法只有两个：
- 用本地服务器预览（
npx serve、python -m http.server或 VS Code Live Server 插件） - 改用 Base64 内联：
cursor: url("data:image/x-icon;base64,AAABAA..."), auto;—— 注意逗号后必须带 fallback 值，且 Base64 字符串要用双引号包裹
.cur 文件比 .png 更稳妥：它自带 hotspot（热区坐标），而 PNG 必须手动写 cursor: url("hand.png") 4 4, auto 才能对齐点击位置，漏写就偏了。
