直接设置 cursor: pointer 可实现鼠标悬停显示手型，推荐配合 :hover 使用以提升用户体验；需确保元素具备点击行为，避免滥用，并注意移动端无悬停效果。
直接给元素设置 cursor: pointer 就能让鼠标悬停时显示为手型（小手图标），这是最常用、最简洁的实现方式。
基础用法：给单个元素添加手型光标
在 CSS 中选中目标元素，添加 cursor: pointer 即可：
- 适用于按钮、链接、卡片、标签等需要提示“可点击”的交互元素
- 无需 JavaScript，纯 CSS 控制，性能好、语义清晰
- 示例：
a { cursor: pointer; }或.btn { cursor: pointer; }
配合 :hover 使用更精准（推荐）
虽然不加 :hover 也能生效，但通常建议只在悬停状态启用手型，避免干扰默认行为：
- 写法：
.item:hover { cursor: pointer; } - 这样元素默认是箭头，移上去才变手型，符合用户直觉
- 特别适合非原生可点击元素（如
div、span），明确传达“这里能点”
注意兼容性和常见误区
cursor: pointer 在所有现代浏览器中都支持良好，但要注意几点：
立即学习“前端免费学习笔记（深入）”；
- 确保元素有点击行为（比如绑了
onclick或@click），否则仅改光标可能误导用户 - 不要滥用：文字段落、纯展示区域一般不用手型，容易降低可信度
- 移动端无效（没有“悬停”概念），但不会报错，可放心使用
- 若同时设置了其他
cursor值（如not-allowed），需注意 CSS 优先级和覆盖顺序
扩展：手型之外的常用交互光标
根据功能匹配不同光标，能提升体验一致性：
-
cursor: move;—— 表示可拖拽（如调节器、排序项） -
cursor: zoom-in;/zoom-out;—— 图片或地图缩放 -
cursor: text;—— 可编辑文本区域（如input、textarea默认值） -
cursor: help;—— 鼠标旁带问号，适合提示图标
