CSS Cursors Reference

CSS 鼠标样式参考表展示了 CSS cursor 属性的所有标准值及其视觉效果预览。鼠标悬停每个条目上时实时显示对应的光标样式，帮助你直观理解 pointer、grab、not-allowed、wait、crosshair、zoom-in 等各种光标的含义。同时包含每种光标的使用建议和浏览器兼容性说明。支持按分类浏览（如链接和状态光标、选择和文本光标、拖拽和调整大小光标）并快速搜索。

CSS 光标参考表在前端 UI 开发中非常实用。设计交互组件时，选择正确的光标样式是用户预期管理的关键——可点击的元素应该有 pointer 光标、不可操作的禁用元素应该有 not-allowed 光标。表单输入框中的文本选择应该有 text 光标。可拖拽的排序列表（如 Trello 卡片）在拖拽中应使用 grabbing 光标。缩放和调整大小区域使用对应的方向光标（ew-resize、ns-resize 等）。在设计系统文档或 UI 组件库展示中作为完整的交互状态参考。

配合 Git 命令参考 学习开发者常用的技术速查表，或使用 CSS 转 Tailwind 查看 Tailwind 的 cursor 相关类名。

CSS 规范定义了 36 种标准光标值：

• 通用光标：auto（浏览器自动决定）、default（默认箭头）、none（隐藏光标）
• 链接和状态：pointer（手型，可点击）、progress（后台忙）、wait（忙碌/沙漏）、help（帮助）、context-menu（右键菜单）
• 选择和文本：text（文本输入）、vertical-text（竖排文本）、cell（表格单元格选择）、crosshair（十字准星）
• 拖拽：grab（可抓取）、grabbing（正在抓取）、move（移动）、copy（复制）、alias（创建快捷方式）、no-drop（不可放置）、not-allowed（禁止操作）

• 滥用 pointer：不要在所有可交互元素上都加 cursor: pointer。这个光标暗示"点击后会导航"，div 标签上滥用 pointer 会违反用户对浏览器行为的心理预期。
• 自定义光标尺寸：自定义光标图片（cursor: url(...)）有限制——Chrome 最大 128×128px，Firefox 和 Safari 最大 32×32px。大尺寸图片会被压缩或忽略。
• 性能：频繁切换大型自定义光标（如在拖拽中）可能导致渲染性能问题，尤其是在低端设备上。
• 触控设备：移动端没有 hover 和 cursor 概念，cursor 属性在触控设备上无效——但不要因此依赖 hover 状态来传递重要信息。

在设计交互原型、选择正确的光标类型、或构建 UI 组件库时使用此参考表。实际编写 CSS 时可直接使用 cursor 属性，这个工具的主要价值在于让你直观地预览和选择正确的光标。