cursor: pointer是最常用且应默认添加的交互提示，用于告知用户可点击；需为所有绑定click事件的元素设置，避免用户反复试探；自定义光标须含尺寸、热点坐标和fallback，移动端safari不支持url()自定义光标。
怎么用 cursor 让鼠标“说话”
直接写 cursor: pointer 就能让元素悬停时变手型，这是最常用、也最该默认加上的交互提示。它不改变功能，但能立刻告诉用户“这里能点”。别只给 <a></a> 或 <button></button> 加——只要绑了 click 事件的 <div>、<code><span></span> 甚至图表图例，都该加。否则用户会反复试探，尤其在无边框、无背景色的区域。
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; }
<p>/<em> 错误：无热点，无 fallback，大图 </em>/
.bad-cursor { cursor: url("big-cursor.png"); }哪些场景必须慎用 cursor: none
隐藏光标听着酷，实则破坏可访问性：屏幕阅读器用户依赖光标定位，键盘 Tab 导航时焦点框若配 none，等于让用户“盲操”。仅限极少数全屏游戏或画布绘图场景，且必须提供替代控制方式（如快捷键提示）。日常业务系统里，它比不用 cursor 更危险。
立即学习“前端免费学习笔记（深入）”；
