CSS如何控制鼠标指针的形状_利用cursor属性自定义css

cursor属性能设哪些合法值

不是所有字符串都能当cursor值用，浏览器只认标准关键字、URL路径或auto这类保留字。写错会直接回退到默认箭头，连报错都不会抛——你改了半天没反应，大概率是拼错了grab写成grap，或者not-allowed漏了短横线。

常见合法值分三类：

• default、pointer、text、move、grab/grabbing、not-allowed——这些是跨浏览器最稳的
• url()自定义图片，但必须配, auto兜底，否则在图片加载失败或不支持时整个光标就消失了
• context-menu这种新值，在旧版safari里不生效，别指望它做核心交互提示

用url()加自定义光标图片要注意什么

想用url(./cursor.png)？先确认三件事：图片尺寸是否≤32×32像素（windows限制）、是否有透明通道、是否带热区坐标。

热区坐标不写，默认以左上角为点击点，结果就是鼠标指哪点哪，但视觉上光标中心偏了——用户拖拽时总感觉“对不准”。正确写法是：

立即学习“前端免费学习笔记（深入）”；

cursor: url(./hand.cur), pointer;

注意：.cur格式比.png更稳妥，原生支持热区；如果非用.png，得补两个数字，比如url(./hand.png) 8 8, pointer，表示从左上角偏移8px处为热区。

cursor在hover和disabled状态下的行为差异

很多人以为给button:disabled设cursor: not-allowed就完事了，其实没用——:disabled伪类本身不触发hover，而cursor只有在元素可交互且被悬停时才生效。真正该做的是：

• 给button[disabled]直接加cursor: not-allowed（属性选择器，不是伪类）
• 避免在父容器上设cursor再靠继承，因为button自己有默认cursor: default，会覆盖继承值
• React/Vue里动态禁用按钮时，记得同时切换className或内联样式，不能只靠disabled属性

移动端 Safari 对 cursor 的特殊处理

ios Safari 完全忽略cursor属性——无论你写pointer还是url()，手指点下去永远是系统默认样式。这不是 bug，是设计如此。所以别在响应式项目里给@media (hover: hover)以外的场景设cursor，否则会误导开发判断。

真要区分触摸/悬停，得靠媒体查询配合：

@media (hover: hover) and (pointer: fine) {<br>  .btn { cursor: pointer; }<br>}

否则在Mac触控板+鼠标混用设备上，cursor可能意外生效又突然消失。

热区坐标、兜底值、移动端失效——这三个点漏掉任何一个，光标就会在某个环境里“失踪”或者“错位”，而且很难一眼定位问题。