CSScursor属性实用技巧解析

cursor 值选错的典型后果

常见误用是把 not-allowed 当视觉禁用，结果只改光标却没同步置灰或加 disabled 属性，用户仍可点击；或者在加载中用了 wait，但后端响应慢，光标卡在沙漏状态，反而让用户以为页面卡死。更隐蔽的问题是：移动端 Safari 完全忽略 url() 自定义光标，只认系统值；IE 只吃 .cur 格式，PNG 直接失效。

• wait 适合瞬时操作（如按钮点击反馈），长耗时任务建议配合骨架屏或进度条，别单靠光标
• move 和 grab 不同：grab 是“准备拖”，grabbing 是“正在拖”，后者需 JS 动态切换
• text 在 contenteditable 元素里才生效，纯 div 加了也没用

自定义光标图片的硬性限制

想用 PNG 做光标？必须带 fallback，且尺寸压到 32×32 像素以内，否则 Chrome 会静默降级。热点坐标（hotspot）不是可选项——没写 url("hand.png") 16 16, pointer，光标点击点就可能偏移，尤其 SVG 转成 data URL 时容易漏掉。

/* 正确：含尺寸、热点、fallback */
.custom-drag { cursor: url("data:image/svg+xml,%3Csvg...%3E") 8 8, move; }
/ 错误：无热点，无 fallback，大图 /
.bad-cursor { cursor: url("big-cursor.png"); }

哪些场景必须慎用 cursor: none

隐藏光标听着酷，实则破坏可访问性：屏幕阅读器用户依赖光标定位，键盘 Tab 导航时焦点框若配 none，等于让用户“盲操”。仅限极少数全屏游戏或画布绘图场景，且必须提供替代控制方式（如快捷键提示）。日常业务系统里，它比不用 cursor 更危险。

好了，本文到此结束，带大家了解了《CSScursor属性实用技巧解析》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！