鼠标指针预览

功能

• 三十多个 `cursor` 关键字，按基本 / 加载 / 拖放 / 缩放 / 改变大小 / 滚动 / 单元格分组
• 鼠标移到预览块上直接看到效果，不用猜
• 每个取值都给出中文名字（`nesw` 是左下↔右上这类）
• ⚠️ 说明指针外观由操作系统与指针主题决定，同一个关键字在不同系统上不一样
• ⚠️ 说明触摸设备上不显示指针，指针不能是唯一的提示手段
• 取值一律按白名单校验后才写进声明，不接自由输入
• 复制的是可以直接粘进样式表的 `.target { cursor: …; }`

使用方法

1. 在下拉里按分组找到想要的那个关键字
2. 鼠标移到下面那块上，看它在你的系统上长什么样
3. 复制代码，把选择器改成你自己的

常见问题

为什么我看到的指针和你截图里的不一样？

因为指针的外观由操作系统与指针主题决定，浏览器只是把关键字交给系统去画。同一个 `cursor: pointer`，在 Windows 上是白色小手、在 macOS 上是指向手、在各个 Linux 桌面环境下又不同；用户装了自定义指针主题，或者用了辅助功能里的放大指针，那更是另一回事。所以这里能保证的只有「这是哪个关键字」。真要完全控制外观，得用 `url()` 给一张自己的图片 —— 但那要处理热点坐标、尺寸上限（各浏览器 32×32 到 128×128 不等）与格式兼容，多数场合不值得。

`col-resize` 和 `ew-resize` 有什么区别？

看起来几乎一样，语义不同。`ew-resize` 是「可以左右拖动改变大小」，是个通用的双向箭头；`col-resize` 专门用在表格列之间的分隔条上，多数系统画的是一条带竖线的双向箭头。屏幕阅读器与某些辅助功能会读这个区别，所以做表格列宽或用 `col-resize`、做通用拖拽用 `ew-resize` 更合适。同理 `row-resize` 对应行高。

为什么手机上点了没反应？

因为触摸设备上根本不显示指针 —— `cursor` 对它们完全无效。这不是兼容性问题，是这个属性本身的适用范围：它描述的是「鼠标移到这个元素上时指针长什么样」，而触摸屏没有「移上去」这个状态。所以如果一个界面只靠指针形状告诉用户「这里可以拖」，那它在手机上是没有这层信息的。指针只能是额外的提示，需要传达的信息要用别的方式（文字、可见的把手、图标的形状）也表达一遍。

能不能给 `cursor` 配自定义图片？

可以（`cursor: url(hand.cur), pointer`），但这个工具没做，有两个原因。一是它需要一张图片，而这里的形态是「选一个值、看效果」，塞一个上传框进来是另一类工具。二是它比看起来麻烦：要指定热点坐标（图片上哪个点算鼠标位置），有尺寸上限（各浏览器从 32×32 到 128×128 不等，超了就被忽略），格式上 `.cur` / `.png` 的支持还不一致，而且加载失败时会静默退回默认指针 —— 用户不会知道自己的图没生效。真要做，记得总在最后留一个关键字兜底。

`not-allowed` 和 `no-drop` 该用哪个？

看场景。`not-allowed` 是「这个操作不被允许」，通常是禁用状态；`no-drop` 是「这里不能放」，用在拖放过程中悬停在无效的放置目标上。两者的指针外观在很多系统上完全一样（都是一个带斜杠的圆），区别在于语义 —— 而在拖放的上下文里，`no-drop` 才是准确的那个。