cursor: pointer是最常用且应默认添加的交互提示,用于告知用户可点击;需为所有绑定click事件的元素设置,避免用户反复试探;自定义光标须含尺寸、热点坐标和fallback,移动端Safari不支持url()自定义光标。

怎么用 cursor 让鼠标“说话”
直接写 常见误用是把 想用 PNG 做光标?必须带 fallback,且尺寸压到 / 错误:无热点,无 fallback,大图 /
.bad-cursor { cursor: url("big-cursor.png"); } 隐藏光标听着酷,实则破坏可访问性:屏幕阅读器用户依赖光标定位,键盘 Tab 导航时焦点框若配 立即学习“前端免费学习笔记(深入)”;cursor: pointer 就能让元素悬停时变手型,这是最常用、也最该默认加上的交互提示。它不改变功能,但能立刻告诉用户“这里能点”。别只给 或 加——只要绑了 click 事件的 甚至图表图例,都该加。否则用户会反复试探,尤其在无边框、无背景色的区域。
cursor 值选错的典型后果not-allowed 当视觉禁用,结果只改光标却没同步置灰或加 disabled 属性,用户仍可点击;或者在加载中用了 wait,但后端响应慢,光标卡在沙漏状态,反而让用户以为页面卡死。更隐蔽的问题是:移动端 Safari 完全忽略 url() 自定义光标,只认系统值;IE 只吃 .cur 格式,PNG 直接失效。
wait 适合瞬时操作(如按钮点击反馈),长耗时任务建议配合骨架屏或进度条,别单靠光标move 和 grab 不同:grab 是“准备拖”,grabbing 是“正在拖”,后者需 JS 动态切换text 在 contenteditable 元素里才生效,纯 div 加了也没用自定义光标图片的硬性限制
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; }
哪些场景必须慎用
cursor: none
none,等于让用户“盲操”。仅限极少数全屏游戏或画布绘图场景,且必须提供替代控制方式(如快捷键提示)。日常业务系统里,它比不用 cursor 更危险。










