按钮:hover未显式声明cursor: pointer时可能失效，因默认行为依赖可交互上下文；重置样式、pointer-events: none、伪按钮、全局覆盖或热区过小均会导致光标不显示，须针对性修复。
button:hover 没写 cursor: pointer
浏览器对 <button> 元素默认就用 cursor: pointer，但这个行为只在“可交互上下文”中生效——比如鼠标悬停、聚焦或有键盘导航时。如果你重置了样式（例如用了 all: unset 或 appearance: none），或者父级设了 cursor: default，它就会失效。
真正可靠的写法是显式声明悬停态：
.btn { /* 不在这里写 cursor */ }
.btn:hover { cursor: pointer; }- 别在基础选择器里写
cursor: pointer期望“一直显示”，那只是碰巧生效，不是设计行为 - 如果按钮是
<div role="button">这类伪按钮，必须加:hover才能触发视觉反馈 - 移动端没有
:hover，但该规则不会报错，可安全保留
pointer-events: none 被继承或误设
这是最隐蔽的失效原因：哪怕你写了 button:hover { cursor: pointer; }，只要父容器或自身设置了 pointer-events: none，鼠标事件被禁用，cursor 就完全不触发。
常见场景包括：
立即学习“前端免费学习笔记（深入）”；
- 模态框遮罩层用了
pointer-events: none，但忘了给内部按钮恢复pointer-events: auto - JS 动态添加 class 时顺手加了
pointer-events: none做禁用，但没同步清理 - 第三方 UI 库组件（如某些弹出菜单）内部设了
pointer-events: none且未暴露控制开关
检查方式：打开开发者工具 → Elements → 选中按钮 → 看 Computed 标签页里 pointer-events 的最终值是不是 none。
img 或背景图容器没加 cursor 样式
<img> 标签本身没有交互语义，默认不响应 cursor: pointer；而用 background-image 的 <div> 更不会自动继承——光标样式必须作用在**承载点击行为的 DOM 元素本身**上。
- 如果是
<img src="..." onClick={...} />，必须加img { cursor: pointer; } - 如果是
<div style="background-image: url(...)" onClick={...} />，样式要写在div上，不是图片路径 - React/Vue 中绑定
@click或onClick不会自动推导光标行为，视觉反馈得手动加
还要注意热区尺寸：iOS Safari 要求可点击区域 ≥ 44×44px，小图标得靠 padding 或 min-width/min-height 扩展，否则光标不跟随手指移动。
全局样式覆盖或优先级冲突
像 * { cursor: default; } 或 body { cursor: text; } 这类高权重规则，会把子元素的 cursor 继承过去，即使你写了 button:hover { cursor: pointer; } 也可能被覆盖。
- 用开发者工具看
Computed里的cursor值，确认来源是不是你写的规则 - 避免用
!important硬顶，优先提高选择器特异性，比如用.my-btn:hover替代button:hover - 注意 CSS-in-JS 或 Shadow DOM 的作用域隔离，外部样式可能根本没打进组件内
真正起效的永远是 computed 结果，不是你写了什么——盯着那个值调，比猜原因快得多。
