cursor属性对大小写、拼写、空格敏感，仅支持标准关键字（如pointer）和规范格式的自定义图标（url("x.cur"), auto），需注意浏览器兼容性、优先级覆盖、热点坐标设置及跨设备差异。
cursor属性值写错导致样式不生效
浏览器对 cursor 值非常敏感，大小写、拼写、空格全错不得。比如写成 "pointer" 没问题，但写成 "Pointer" 或 "hand"（非标准值）就完全无效，且不会报错，只会默默回退到默认箭头。
- 只用标准关键字：如
default、pointer、text、move、not-allowed、wait - 自定义图标必须带格式声明：
url("icon.cur"), auto—— 缺少, auto回退值时，某些浏览器（尤其 Safari）会直接忽略整个声明 - IE 仅支持
.cur和.ani，不支持.png；现代浏览器支持.png、.svg（需注意 SVG 渲染兼容性）
hover状态没触发cursor变化？检查CSS优先级和继承
cursor 不会继承，但会被父元素的 cursor 值覆盖——如果你给 div 设了 cursor: not-allowed，里面所有子元素（包括按钮、链接）都会变成禁用光标，除非显式重写。
- 确保选择器足够具体：比如
a:hover比:hover更可靠；用button:focus补充键盘交互场景 - 避免被更高权重规则覆盖：检查 DevTools 中
cursor是否被 strikethrough，常见于重置 CSS（如 normalize.css）或 UI 框架（如 Ant Design 的全局* { cursor: default }） - 移动端 Safari 对
:hover支持不稳定，真机上可能根本不触发——需要配合@media (hover: hover)条件判断
自定义光标图片偏移、尺寸异常
自定义图标默认以左上角为热点（hotspot），但多数图标设计时没考虑这点，结果鼠标点击位置和视觉中心严重错位，尤其在高 DPI 屏幕上更明显。
- 必须指定热点坐标：
url("hand.png") 4 4, pointer表示以 PNG 图像中 x=4px、y=4px 处为点击点（单位是像素，不是 rem/em） - 图标尺寸建议 ≤32×32px；过大（如 128×128）在 Windows 上可能被强制缩放失真，macOS 则可能直接降级为系统默认
- SVG 光标需内联 base64 或通过 data URL 引入，外部引用在 Firefox 中不支持；且不能含外部资源（如
<image></image>标签）
cursor在拖拽（drag）或表单控件中表现异常
原生可拖拽元素（如 draggable="true"）或 <input type="range"> 等控件，浏览器会强制覆盖你设置的 cursor，这是有意为之的行为，不是 bug。
- 拖拽过程中，
dragstart后浏览器自动切为move或grabbing，此时 CSS 设置无效；如需统一风格，只能改用 JS 模拟拖拽 -
<select></select>在 Chrome/Firefox 中 hover 时显示default，无法改为pointer—— 这是表单控件的渲染隔离机制决定的 - 使用
cursor: zoom-in / zoom-out时，部分旧版 Edge 不识别，需 fallback 到pointer
真正麻烦的是跨设备一致性：同一段 cursor: url(...) 8 8, auto 在 Windows 笔记本触控板、Mac 触控板、iPad Safari、Chromebook 上表现可能完全不同——不是代码写错了，而是平台光标引擎根本不在一个抽象层上。调试时别只盯着 DevTools，真机多点几下才靠谱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
