1. 为什么你的 cursor 总是不生效做前端这些年我遇到过一个特别典型的需求一个拖拽排序的列表产品经理要求鼠标悬停在卡片上时变成「抓手」拖拽过程中变成「抓取中」放到禁用区域时又得变成「禁止」。听起来简单但真动手写的时候你会发现cursor这个属性远比想象中复杂——它既有几十个内置关键字又支持url()自定义图片还牵扯到热点坐标、格式兼容、降级顺序稍不注意就会出现「本地好好的上线后光标没变」的尴尬。cursor是 CSS 里控制鼠标指针样式的属性它能决定用户把鼠标移到某个元素上时看到的是箭头、小手、文本光标还是自定义图片。它适合所有需要精细化交互反馈的前端场景尤其是按钮、可拖拽元素、禁用态、画布工具、富文本编辑器这类对指针语义要求很高的地方。很多人以为cursor: pointer就是全部其实那只是冰山一角。这篇文章会从内置关键字讲起一路讲到url()自定义光标、热点坐标怎么算、多格式降级怎么写最后给你一套可以直接复制到项目里的代码片段和浏览器验证步骤。不管你是刚接触 CSS 的新手还是想补齐兼容性细节的老手都能在这里找到能直接用的东西。2. 内置关键字从 default 到 zoom-in 的完整清单2.1 最常用的六个关键字先把你日常 90% 场景会用到的几个列出来这几个几乎每个项目都会碰到关键字效果典型场景default系统默认箭头普通内容区pointer手指形状按钮、链接、可点击卡片text文本选择 I 形输入框、可选中文字move十字移动箭头可拖拽面板not-allowed禁止圆圈禁用按钮grab/grabbing张开手 / 握紧手拖拽列表、画布平移这里有个容易踩的坑很多人写禁用态时用cursor: no-drop但no-drop和not-allowed在不同系统上表现不一致。not-allowed是「禁止操作」no-drop是「不能放置」语义不同。如果你只是想让用户知道「这里点不了」用not-allowed更稳妥。2.2 那些你可能没用过的关键字除了上面这些CSS 还定义了一大批语义化关键字用对了能让交互质感提升一个档次zoom-in和zoom-out适合图片预览的放大缩小按钮crosshair适合取色器、截图工具help会在箭头旁加一个问号适合带提示的字段wait是转圈等待适合异步加载中的区域progress是箭头加转圈表示「后台在忙但你可以继续操作」cell是表格单元格的十字光标适合 Excel 类表格col-resize和row-resize适合可拖拽调整宽高的分栏。还有一组方向调整光标n-resize、s-resize、e-resize、w-resize以及四个对角方向ne-resize、nw-resize、se-resize、sw-resize。做可视化编辑器拖拽控制点时这组关键字比自定义图片省事得多而且系统渲染更清晰。2.3 关键字写法与继承特性写法很直接可以写在任何选择器里.btn { cursor: pointer; } .input { cursor: text; } .drag-handle { cursor: grab; } .drag-handle:active { cursor: grabbing; } .disabled { cursor: not-allowed; }注意cursor是可继承属性。如果你在body上设了cursor: default子元素没显式覆盖的话会继承下来。这既是好事也是坑好处是全局统一坑在于某些组件库会在根节点设cursor: pointer导致你局部想改回箭头时得显式写cursor: default才能覆盖。提示cursor: hand是 IE 时代的私有写法现代浏览器不认统一用pointer就行。如果你在维护老项目看到hand可以放心替换。3. url() 自定义光标格式、热点与降级3.1 自定义光标的基本写法内置关键字不够用时url()就派上用场了。基本语法是.custom-cursor { cursor: url(./cursor.png), auto; }这里有两个关键点。第一url()后面必须跟一个关键字作为降级否则图片加载失败时浏览器会忽略整条声明。第二图片格式有讲究PNG 和 SVG 兼容性最好CUR 是 Windows 专用格式JPG 虽然能用但不支持透明做光标会带白底很难看。推荐用 PNG尺寸控制在 32x32 以内。虽然现代浏览器支持更大的图但超过 32x32 在部分系统上会被缩放或直接忽略。SVG 也可以但要注意 SVG 里不能有外部引用否则同样会加载失败。3.2 热点坐标怎么算热点hotspot指的是光标图片上「真正生效的那个点」也就是点击时触发事件的坐标。默认是图片左上角(0, 0)但很多时候这不是你想要的。比如一个十字准星图片热点应该在正中心。写法是在url()后面加两个数字用空格分隔.crosshair-cursor { cursor: url(./crosshair.png) 16 16, crosshair; }这里的16 16就是热点坐标单位是像素相对于图片左上角。第一个数字是 x 轴第二个是 y 轴。如果你的准星图是 32x32中心点就是16 16。热点坐标不能为负数也不能超过图片尺寸。如果写超了浏览器会忽略整条声明。我试过在 24x24 的图上写30 30结果光标直接没生效排查了半天才发现是坐标越界。3.3 多格式降级与兼容写法不同浏览器对图片格式的支持不一样稳妥的做法是写多条降级.fancy-cursor { cursor: url(./cursor.svg) 4 4, url(./cursor.png) 4 4, url(./cursor.cur) 4 4, pointer; }浏览器会从左到右尝试用第一个能成功加载的。注意每条url()后面都要跟热点坐标如果和默认不同最后必须有一个关键字兜底。还有一个细节url()里的路径如果是相对路径是相对于 CSS 文件的位置不是 HTML 文件。如果你把 CSS 放在css/目录图片放在images/目录路径要写成../images/cursor.png。这个坑我在多个项目里都见过尤其是用构建工具打包后路径变了光标就失效了。注意部分浏览器对跨域图片作为光标有限制。如果图片放在 CDN 上记得配置 CORS 响应头否则光标可能加载失败。最保险的做法是把光标图片放在同域下。4. 可复制配置按钮、拖拽、禁用态实战4.1 按钮与可点击卡片的完整样式先给你一套可以直接抄的按钮样式覆盖默认、悬停、按下、禁用四个状态.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; cursor: pointer; transition: background 0.15s ease; } .btn:hover { background: #eaeef2; } .btn:active { cursor: progress; background: #dfe3e8; } .btn:disabled, .btn[aria-disabledtrue] { cursor: not-allowed; opacity: 0.6; }这里有个细节按下时用cursor: progress而不是grabbing是因为按钮点击后通常会触发异步请求progress能给用户「正在处理」的心理暗示。当然如果你不喜欢换成pointer也完全没问题。4.2 拖拽列表的 grab / grabbing 切换拖拽场景是cursor最能体现价值的地方。一个可排序列表的完整写法.sortable-item { cursor: grab; user-select: none; } .sortable-item:active { cursor: grabbing; } .sortable-item.is-dragging { cursor: grabbing; opacity: 0.8; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .sortable-item.is-disabled { cursor: not-allowed; pointer-events: none; }注意user-select: none要加上否则拖拽时容易误选中文字。另外pointer-events: none会让元素完全不响应鼠标事件如果你还想让用户看到not-allowed光标就不能加这一条只保留cursor即可。4.3 自定义光标在画布工具中的应用如果你在做绘图、截图、取色这类工具自定义光标能大幅提升专业感。下面是一个取色器的例子.color-picker { cursor: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width24 height24circle cx12 cy12 r8 fillnone strokeblack stroke-width2/circle cx12 cy12 r2 fillblack//svg) 12 12, crosshair; }这里直接用 data URI 内联 SVG省去了图片请求适合小尺寸简单图形。热点设在12 12正好是圆心。如果你的图形复杂还是建议用外部 PNG 文件可维护性更好。5. 验证请求与浏览器实测步骤5.1 用 DevTools 快速验证写完样式后最快的验证方式是打开 Chrome DevTools第一步右键点击目标元素选择「检查」。第二步在 Elements 面板右侧的 Styles 区域找到cursor属性。第三步把鼠标移到属性值上DevTools 会显示一个预览小图。第四步直接在页面上把鼠标移到元素上观察实际效果。如果光标没变先看 Styles 面板里cursor是不是被划掉了。被划掉说明有更高优先级的规则覆盖了它或者写法有语法错误。常见错误包括url()后面忘了跟关键字、热点坐标越界、图片路径 404。5.2 用 Network 面板排查图片加载自定义光标不生效十有八九是图片没加载成功。打开 Network 面板筛选 Img 类型刷新页面看光标图片的请求状态。如果是 404检查路径如果是 CORS 错误检查响应头如果是 200 但光标还是没变检查图片尺寸和格式。还有一个隐蔽的坑某些浏览器会缓存失败的光标请求。如果你改了路径但没生效试试硬刷新CtrlShiftR或者禁用缓存。5.3 跨浏览器实测清单不同浏览器对cursor的支持有细微差异上线前建议按这个清单过一遍检查项ChromeFirefoxSafariEdge内置关键字全支持全支持全支持全支持PNG 自定义支持支持支持支持SVG 自定义支持支持部分版本有限制支持热点坐标支持支持支持支持多 url 降级支持支持支持支持Safari 对 SVG 光标的支持一直比较保守如果目标用户包含 Mac 用户建议 PNG 和 SVG 都提供用降级写法兜底。6. 常见报错与排查手册6.1 光标完全不生效最常见的原因有三个。第一url()后面没跟关键字整条声明被忽略。第二图片路径错误浏览器加载失败后回退到默认。第三有更高优先级的规则覆盖了比如内联样式或者!important。排查顺序先看 DevTools 里属性有没有被划掉再看 Network 里图片有没有 404最后检查选择器优先级。6.2 光标生效但热点不对热点坐标写错是最常见的原因。记住坐标是相对于图片左上角不是中心。如果你想让热点在中心得手动算图片宽高除以 2。另外坐标不能是负数也不能超过图片尺寸。还有一种情况图片本身有透明边距你以为的热点位置和实际像素位置对不上。用图片编辑工具确认一下实际内容区域。6.3 光标闪烁或跳回默认这种情况通常发生在拖拽过程中。原因是拖拽时鼠标离开了元素边界cursor不再作用于该元素。解决办法是在拖拽期间给body或根容器加一个类全局设置光标body.is-dragging, body.is-dragging * { cursor: grabbing !important; }用!important是为了覆盖所有子元素的cursor确保拖拽期间光标一致。拖拽结束后移除这个类即可。6.4 移动端完全不显示这里要明确一点移动端没有鼠标cursor属性基本无效。触屏设备上不会显示光标所以不要指望用cursor做移动端交互反馈。移动端应该用:active状态、震动反馈或者视觉变化来替代。如果你在响应式项目里写了cursor记得用媒体查询把它限制在桌面端media (hover: hover) and (pointer: fine) { .btn { cursor: pointer; } }hover: hover表示设备支持悬停pointer: fine表示有精确指针设备鼠标。这两个条件同时满足才应用光标样式能避免在触屏设备上做无用功。7. 接入与调试资源如果你在项目里需要统一管理模型调用、编码辅助或者 API 调试可以配合一些工具链来提升效率。模型对话调试可以用 TaoToken 模型对话长期编码和 Agent 场景可以看 Coding Plan密钥管理在 API Keys接入文档在 doc。API 入口是https://taotoken.net/api官网在 taotoken.net。回到cursor本身最后给你一个实用建议把项目里所有光标样式集中到一个_cursor.css文件里用 CSS 变量管理热点坐标和图片路径。这样换主题或者调整光标尺寸时只改一处就行不用满项目搜cursor:。我现在的项目里就是这么干的维护成本低了很多。
CSS cursor 鼠标样式全解析：从 default 到自定义图片，一次搞懂 cursor 属性
1. 为什么你的 cursor 总是不生效做前端这些年我遇到过一个特别典型的需求一个拖拽排序的列表产品经理要求鼠标悬停在卡片上时变成「抓手」拖拽过程中变成「抓取中」放到禁用区域时又得变成「禁止」。听起来简单但真动手写的时候你会发现cursor这个属性远比想象中复杂——它既有几十个内置关键字又支持url()自定义图片还牵扯到热点坐标、格式兼容、降级顺序稍不注意就会出现「本地好好的上线后光标没变」的尴尬。cursor是 CSS 里控制鼠标指针样式的属性它能决定用户把鼠标移到某个元素上时看到的是箭头、小手、文本光标还是自定义图片。它适合所有需要精细化交互反馈的前端场景尤其是按钮、可拖拽元素、禁用态、画布工具、富文本编辑器这类对指针语义要求很高的地方。很多人以为cursor: pointer就是全部其实那只是冰山一角。这篇文章会从内置关键字讲起一路讲到url()自定义光标、热点坐标怎么算、多格式降级怎么写最后给你一套可以直接复制到项目里的代码片段和浏览器验证步骤。不管你是刚接触 CSS 的新手还是想补齐兼容性细节的老手都能在这里找到能直接用的东西。2. 内置关键字从 default 到 zoom-in 的完整清单2.1 最常用的六个关键字先把你日常 90% 场景会用到的几个列出来这几个几乎每个项目都会碰到关键字效果典型场景default系统默认箭头普通内容区pointer手指形状按钮、链接、可点击卡片text文本选择 I 形输入框、可选中文字move十字移动箭头可拖拽面板not-allowed禁止圆圈禁用按钮grab/grabbing张开手 / 握紧手拖拽列表、画布平移这里有个容易踩的坑很多人写禁用态时用cursor: no-drop但no-drop和not-allowed在不同系统上表现不一致。not-allowed是「禁止操作」no-drop是「不能放置」语义不同。如果你只是想让用户知道「这里点不了」用not-allowed更稳妥。2.2 那些你可能没用过的关键字除了上面这些CSS 还定义了一大批语义化关键字用对了能让交互质感提升一个档次zoom-in和zoom-out适合图片预览的放大缩小按钮crosshair适合取色器、截图工具help会在箭头旁加一个问号适合带提示的字段wait是转圈等待适合异步加载中的区域progress是箭头加转圈表示「后台在忙但你可以继续操作」cell是表格单元格的十字光标适合 Excel 类表格col-resize和row-resize适合可拖拽调整宽高的分栏。还有一组方向调整光标n-resize、s-resize、e-resize、w-resize以及四个对角方向ne-resize、nw-resize、se-resize、sw-resize。做可视化编辑器拖拽控制点时这组关键字比自定义图片省事得多而且系统渲染更清晰。2.3 关键字写法与继承特性写法很直接可以写在任何选择器里.btn { cursor: pointer; } .input { cursor: text; } .drag-handle { cursor: grab; } .drag-handle:active { cursor: grabbing; } .disabled { cursor: not-allowed; }注意cursor是可继承属性。如果你在body上设了cursor: default子元素没显式覆盖的话会继承下来。这既是好事也是坑好处是全局统一坑在于某些组件库会在根节点设cursor: pointer导致你局部想改回箭头时得显式写cursor: default才能覆盖。提示cursor: hand是 IE 时代的私有写法现代浏览器不认统一用pointer就行。如果你在维护老项目看到hand可以放心替换。3. url() 自定义光标格式、热点与降级3.1 自定义光标的基本写法内置关键字不够用时url()就派上用场了。基本语法是.custom-cursor { cursor: url(./cursor.png), auto; }这里有两个关键点。第一url()后面必须跟一个关键字作为降级否则图片加载失败时浏览器会忽略整条声明。第二图片格式有讲究PNG 和 SVG 兼容性最好CUR 是 Windows 专用格式JPG 虽然能用但不支持透明做光标会带白底很难看。推荐用 PNG尺寸控制在 32x32 以内。虽然现代浏览器支持更大的图但超过 32x32 在部分系统上会被缩放或直接忽略。SVG 也可以但要注意 SVG 里不能有外部引用否则同样会加载失败。3.2 热点坐标怎么算热点hotspot指的是光标图片上「真正生效的那个点」也就是点击时触发事件的坐标。默认是图片左上角(0, 0)但很多时候这不是你想要的。比如一个十字准星图片热点应该在正中心。写法是在url()后面加两个数字用空格分隔.crosshair-cursor { cursor: url(./crosshair.png) 16 16, crosshair; }这里的16 16就是热点坐标单位是像素相对于图片左上角。第一个数字是 x 轴第二个是 y 轴。如果你的准星图是 32x32中心点就是16 16。热点坐标不能为负数也不能超过图片尺寸。如果写超了浏览器会忽略整条声明。我试过在 24x24 的图上写30 30结果光标直接没生效排查了半天才发现是坐标越界。3.3 多格式降级与兼容写法不同浏览器对图片格式的支持不一样稳妥的做法是写多条降级.fancy-cursor { cursor: url(./cursor.svg) 4 4, url(./cursor.png) 4 4, url(./cursor.cur) 4 4, pointer; }浏览器会从左到右尝试用第一个能成功加载的。注意每条url()后面都要跟热点坐标如果和默认不同最后必须有一个关键字兜底。还有一个细节url()里的路径如果是相对路径是相对于 CSS 文件的位置不是 HTML 文件。如果你把 CSS 放在css/目录图片放在images/目录路径要写成../images/cursor.png。这个坑我在多个项目里都见过尤其是用构建工具打包后路径变了光标就失效了。注意部分浏览器对跨域图片作为光标有限制。如果图片放在 CDN 上记得配置 CORS 响应头否则光标可能加载失败。最保险的做法是把光标图片放在同域下。4. 可复制配置按钮、拖拽、禁用态实战4.1 按钮与可点击卡片的完整样式先给你一套可以直接抄的按钮样式覆盖默认、悬停、按下、禁用四个状态.btn { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border: 1px solid #d0d7de; border-radius: 6px; background: #f6f8fa; cursor: pointer; transition: background 0.15s ease; } .btn:hover { background: #eaeef2; } .btn:active { cursor: progress; background: #dfe3e8; } .btn:disabled, .btn[aria-disabledtrue] { cursor: not-allowed; opacity: 0.6; }这里有个细节按下时用cursor: progress而不是grabbing是因为按钮点击后通常会触发异步请求progress能给用户「正在处理」的心理暗示。当然如果你不喜欢换成pointer也完全没问题。4.2 拖拽列表的 grab / grabbing 切换拖拽场景是cursor最能体现价值的地方。一个可排序列表的完整写法.sortable-item { cursor: grab; user-select: none; } .sortable-item:active { cursor: grabbing; } .sortable-item.is-dragging { cursor: grabbing; opacity: 0.8; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } .sortable-item.is-disabled { cursor: not-allowed; pointer-events: none; }注意user-select: none要加上否则拖拽时容易误选中文字。另外pointer-events: none会让元素完全不响应鼠标事件如果你还想让用户看到not-allowed光标就不能加这一条只保留cursor即可。4.3 自定义光标在画布工具中的应用如果你在做绘图、截图、取色这类工具自定义光标能大幅提升专业感。下面是一个取色器的例子.color-picker { cursor: url(data:image/svgxml;utf8,svg xmlnshttp://www.w3.org/2000/svg width24 height24circle cx12 cy12 r8 fillnone strokeblack stroke-width2/circle cx12 cy12 r2 fillblack//svg) 12 12, crosshair; }这里直接用 data URI 内联 SVG省去了图片请求适合小尺寸简单图形。热点设在12 12正好是圆心。如果你的图形复杂还是建议用外部 PNG 文件可维护性更好。5. 验证请求与浏览器实测步骤5.1 用 DevTools 快速验证写完样式后最快的验证方式是打开 Chrome DevTools第一步右键点击目标元素选择「检查」。第二步在 Elements 面板右侧的 Styles 区域找到cursor属性。第三步把鼠标移到属性值上DevTools 会显示一个预览小图。第四步直接在页面上把鼠标移到元素上观察实际效果。如果光标没变先看 Styles 面板里cursor是不是被划掉了。被划掉说明有更高优先级的规则覆盖了它或者写法有语法错误。常见错误包括url()后面忘了跟关键字、热点坐标越界、图片路径 404。5.2 用 Network 面板排查图片加载自定义光标不生效十有八九是图片没加载成功。打开 Network 面板筛选 Img 类型刷新页面看光标图片的请求状态。如果是 404检查路径如果是 CORS 错误检查响应头如果是 200 但光标还是没变检查图片尺寸和格式。还有一个隐蔽的坑某些浏览器会缓存失败的光标请求。如果你改了路径但没生效试试硬刷新CtrlShiftR或者禁用缓存。5.3 跨浏览器实测清单不同浏览器对cursor的支持有细微差异上线前建议按这个清单过一遍检查项ChromeFirefoxSafariEdge内置关键字全支持全支持全支持全支持PNG 自定义支持支持支持支持SVG 自定义支持支持部分版本有限制支持热点坐标支持支持支持支持多 url 降级支持支持支持支持Safari 对 SVG 光标的支持一直比较保守如果目标用户包含 Mac 用户建议 PNG 和 SVG 都提供用降级写法兜底。6. 常见报错与排查手册6.1 光标完全不生效最常见的原因有三个。第一url()后面没跟关键字整条声明被忽略。第二图片路径错误浏览器加载失败后回退到默认。第三有更高优先级的规则覆盖了比如内联样式或者!important。排查顺序先看 DevTools 里属性有没有被划掉再看 Network 里图片有没有 404最后检查选择器优先级。6.2 光标生效但热点不对热点坐标写错是最常见的原因。记住坐标是相对于图片左上角不是中心。如果你想让热点在中心得手动算图片宽高除以 2。另外坐标不能是负数也不能超过图片尺寸。还有一种情况图片本身有透明边距你以为的热点位置和实际像素位置对不上。用图片编辑工具确认一下实际内容区域。6.3 光标闪烁或跳回默认这种情况通常发生在拖拽过程中。原因是拖拽时鼠标离开了元素边界cursor不再作用于该元素。解决办法是在拖拽期间给body或根容器加一个类全局设置光标body.is-dragging, body.is-dragging * { cursor: grabbing !important; }用!important是为了覆盖所有子元素的cursor确保拖拽期间光标一致。拖拽结束后移除这个类即可。6.4 移动端完全不显示这里要明确一点移动端没有鼠标cursor属性基本无效。触屏设备上不会显示光标所以不要指望用cursor做移动端交互反馈。移动端应该用:active状态、震动反馈或者视觉变化来替代。如果你在响应式项目里写了cursor记得用媒体查询把它限制在桌面端media (hover: hover) and (pointer: fine) { .btn { cursor: pointer; } }hover: hover表示设备支持悬停pointer: fine表示有精确指针设备鼠标。这两个条件同时满足才应用光标样式能避免在触屏设备上做无用功。7. 接入与调试资源如果你在项目里需要统一管理模型调用、编码辅助或者 API 调试可以配合一些工具链来提升效率。模型对话调试可以用 TaoToken 模型对话长期编码和 Agent 场景可以看 Coding Plan密钥管理在 API Keys接入文档在 doc。API 入口是https://taotoken.net/api官网在 taotoken.net。回到cursor本身最后给你一个实用建议把项目里所有光标样式集中到一个_cursor.css文件里用 CSS 变量管理热点坐标和图片路径。这样换主题或者调整光标尺寸时只改一处就行不用满项目搜cursor:。我现在的项目里就是这么干的维护成本低了很多。
