按钮上直接写 cursor: pointer 不够，需写在自身选择器中、优先用 :hover 触发、disabled 时设 not-allowed；移动端无效，高DPI 和暗色模式需适配；光标是交互契约，须语义准确、设备兼容。
按钮上直接写 cursor: pointer 就够了吗？
不够，但离正确很近。关键不是“能不能加”，而是“加在哪、什么时候加、加了会不会误导”。
原生 button 元素默认已有系统级点击反馈（比如聚焦时的 outline），但光标不会自动变小手——这是浏览器有意为之：避免把所有按钮都当成链接。所以必须手动设置，但有三个实操要点：
-
cursor: pointer必须写在按钮自身选择器里，比如button或.btn，不能只写在父容器上 - 推荐优先用
button:hover { cursor: pointer; }，而不是常态下就设——防止按钮还在加载或逻辑未就绪时提前暴露可点态 - 如果按钮有
disabled状态，记得单独覆盖：button:disabled { cursor: not-allowed; }，否则用户会误点
为什么 hover 里设比直接设在常态更稳妥？
因为视觉反馈要和交互能力严格同步。常见错误是按钮还没绑定 JS 事件，或后端接口没返回，但光标已经变成小手，用户点下去没反应，第一反应是“页面卡了”。
- 常态下保持
cursor: default（或不设，由浏览器决定）更安全 -
:hover是用户主动悬停后的信号，此时你大概率已准备好响应，光标变化才真正有意义 - 对于带 loading 状态的按钮，可在 JS 切换 class 后同步改光标：
.btn.loading { cursor: wait; }，比纯 CSS 更可控
移动端和高DPI屏上要注意什么？
移动端基本无视 cursor 值，iOS 和 Android 浏览器对 pointer 以外的值大多不渲染——这不是 bug，是规范行为。别花时间调试“为什么手机上没小手”。
-
cursor: pointer在移动端输入框内、部分 Safari 版本中可能偶现，但不可依赖 - 高DPI 屏（如 MacBook Retina）加载自定义
url()光标时，若只提供 1x 图片，会模糊或偏移；必须配image-set()或媒体查询提供 2x 资源 - 暗色模式下自定义光标若为白底黑图标，会在深色背景里“消失”，得额外提供适配版本或 fallback
哪些 cursor 值容易被误用？
pointer 最安全，但其他值一旦错配，反而降低可理解性：
-
move不等于“能点”，它专指拖拽操作；用在普通按钮上会让用户下意识想拖，而不是点 -
grab和grabbing是成对出现的，前者表示“可抓取”，后者需 JS 动态切换（比如拖动开始后加 class），静态写死没意义 -
zoom-in在 Chrome 98+ 才支持，旧版直接回退到default；如果缩放功能强依赖该提示，得用 JS 检测并 fallback -
not-allowed和no-drop视觉相似，但语义不同：not-allowed表功能禁用（按钮灰掉），no-drop只用于 dragover 被拒绝的瞬间
光标样式不是装饰，是交互契约的一部分。写错位置、用错值、忽略设备差异，都会让提示失效甚至产生误导。
立即学习“前端免费学习笔记（深入）”；
