HTML按钮默认使用箭头光标，需用CSS显式设置cursor: pointer；常见失效原因包括优先级覆盖、disabled状态或误用div模拟按钮，应确保语义正确、可访问且跨端一致。
HTML按钮默认不是手型光标，需要CSS显式设置
浏览器对 <button></button> 元素默认使用箭头光标（cursor: default），即使它有点击行为。手型光标（cursor: pointer）不会自动出现，必须手动加CSS。这不是bug，是规范行为——只有明确表示“可交互”的元素才建议用pointer，避免误导用户。
实操建议：
- 直接在按钮上加内联样式：
<button style="cursor: pointer;">加入购物车</button> - 更推荐用类名统一控制：
<button class="add-to-cart">加入购物车</button>，再配CSS：.add-to-cart { cursor: pointer; } - 不要只靠
onclick属性触发光标变化——JS绑定事件不影响默认光标，仍需CSS
为什么用了cursor: pointer但没生效？常见原因
最常踩的坑是CSS优先级或继承覆盖。比如父容器设置了cursor: default，或重置样式库（如Normalize.css）已全局禁用指针光标。
排查步骤：
立即学习“前端免费学习笔记（深入）”；
生成HTML格式PPT
下载
从零开始创建惊艳、动画丰富且自包含的 HTML 演示文稿，或通过转换 PowerPoint 文件生成。当用户希望制作幻灯片、构建演示文稿、打造路演资料（pitch deck）、将 PPT/PPTX 转换为网页格式，或增强现有 HTML 演示文稿时，应使用此能力。该能力帮助用户通过视觉预览而非抽象选项来发掘自身审美偏好。
- 打开浏览器开发者工具，选中按钮，看
cursor是否被划掉（表示被更高优先级规则覆盖） - 检查是否有类似
* { cursor: default !important; }的全局强制规则 - 确认按钮没有被
disabled属性禁用——禁用状态下cursor: not-allowed会强制覆盖pointer - 避免在伪类（如
:hover）里单独设cursor，应直接作用于常态
React/Vue等框架里按钮光标失效？注意事件绑定方式
在JSX或模板中写@click="addToCart"或onClick={addToCart}本身不改变光标。但若误用<div onclick="...">模拟按钮，就容易漏掉<code>cursor——因为div默认无交互语义，连button的默认焦点/键盘支持都没有。
正确做法：
- 始终用原生
<button></button>标签，而非<div>或<code><span></span>加事件 - 若必须用非按钮元素（如图标按钮），务必同时加：
role="button"、tabIndex="0"和cursor: pointer - SSR或动态渲染时，确保CSS在按钮DOM挂载前已加载，否则可能闪动为默认光标
- 移除iOS点击高亮（可选）：
-webkit-tap-highlight-color: transparent; - 确保按钮有足够点击区域（至少44×44px），避免因过小导致误触
- 别依赖光标变化做功能提示——移动端没光标，所有交互意图必须靠视觉样式（颜色、阴影、边框）表达
移动端点按反馈要不要同步处理？
仅设cursor: pointer对iOS/Android无效（它们不支持cursor属性），但会影响桌面端体验。真正影响移动端的是点击高亮和响应延迟。
配套建议：
手型光标只是表层信号，背后要对齐的是语义正确性、可访问性和跨端一致性。很多人加了cursor: pointer就以为完成了，结果按钮无法键盘聚焦、屏幕阅读器读不出功能、或在iPad上毫无反馈——这些才是实际线上问题里更常卡住的地方。
