应写 .text:hover { cursor: pointer; }，仅当元素有真实交互意图（如绑定点击事件）时才添加，避免误导用户；普通文本无交互逻辑时设该样式属“假反馈”，损害体验。
直接写 .text:hover { cursor: pointer; } 就行，但必须确保元素有真实交互意图，否则会误导用户。
为什么不能只写 .text { cursor: pointer; }
浏览器不会默认把普通文字（如 p、span）当作可点击元素，所以即使加了 cursor: pointer;，它也会生效——但这是“假反馈”。用户移上去看到手型，点下去却没反应，体验崩坏。
- 原生可点击元素（
a、button）本身已有cursor: pointer，多数情况无需额外设置 - 若你重置过样式（比如用了
all: unset或父级设了cursor: default），才需要显式恢复 - 对纯文本容器（如
div > p），直接在p上写:hover才能精准触发，写在父div上可能因冒泡或层级失效
:hover 必须作用于目标元素本身
光标样式不会继承，也不会从父容器“漏下来”。常见错误是给外层 div 加 :hover，结果内部文字没变化。
- ✅ 正确：
p.clickable:hover { cursor: pointer; } - ❌ 错误：
div.container:hover p { cursor: pointer; }—— 这样虽然语法合法，但鼠标移到p上时，div不一定处于 :hover 状态（尤其有 padding/margin 时） - 移动端无 hover 概念，这段 CSS 在 iOS/Android 浏览器里完全不执行，但也不会报错，容易误以为“生效了”
手型不是万能的：语义错配比没样式更危险
用户看到手型，预期是“点一下会触发动作”。如果只是视觉动效、无 JS 绑定、没 onclick 或 @click，就等于撒谎。
- 禁用状态要同步改光标：
.btn:disabled { cursor: not-allowed; }，别只靠灰度 - 拖拽场景优先用
cursor: grab;和cursor: grabbing;，比pointer更准确 -
hand是 IE 旧私有值，现代项目一律用pointer；text只在真正可选中文本的区域有效（比如input里会变 I 形，div里设了也没用） - 如果元素设置了
pointer-events: none;，再写cursor也白搭——鼠标根本感知不到它
最常被忽略的一点：光标样式是交互契约的最后一环。它不解决“能不能点”，只强化“该不该点”。先保证逻辑正确，再加 cursor: pointer;，顺序颠倒，问题就藏得更深。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
