hover伪类必须直接写在目标元素选择器后
写 .card:hover 才能响应卡片本身的悬停；写 .container:hover .card 是等鼠标停在容器上才变卡片样式，多数时候这不是你想要的。常见失效原因：选中了没尺寸的 div（比如 height: 0 或没内容）、被 pointer-events: none 拦截、或父级设置了 display: none 或 visibility: hidden。
实操建议：
- 用开发者工具勾选 “Force element state” →
:hover，看样式是否被激活 - 给目标元素加
min-height: 20px或display: block确保它“可悬停” - 避免对
disabled的button或input依赖:hover
transition 必须指定具体属性，不能只写 all
transition: all 0.2s 表面省事，实际容易拖慢渲染——浏览器得监听所有属性变化，包括 height、width 这类会触发重排（reflow）的属性。而 transform 和 opacity 走 GPU 合成层，更顺滑。
实操建议：
- 只过渡你真正要变的属性，例如
transition: background-color 0.2s ease, transform 0.25s ease - 别对
top、left、margin做 transition，它们会频繁重排 - 旧版 Safari 不支持
transition: 0.2s这种简写，必须写全属性名
移动端 hover 不可靠，别用它做关键交互
iOS Safari 中，:hover 通常只在首次点击后才“激活”，第二次悬停才生效；Android Chrome 则可能完全不触发。这意味着纯 :hover 显示的 tooltip、操作按钮，键盘用户和触摸用户大概率看不到。
实操建议：
- 关键信息或操作入口，必须补充
:focus或:focus-within - 需要悬停显示按钮时，优先用
.Box:hover .Btn+opacity+transition，而非display: none/block（后者无法过渡） - 测试时真机连 Safari 开发者工具，别只靠桌面模拟器
伪类顺序错了，hover 就会被覆盖
对 a 标签，:hover 必须写在 :link 和 :visited 之后、:active 之前，即 LoVe HAte 规则（:link → :visited → :hover → :active）。否则默认蓝色永远出不来。
如果还要支持键盘聚焦，:focus 得放在最后，否则 :hover 会盖掉焦点样式。组合状态如 button:hover:focus 可以共存高亮，比单独写更可控。
容易被忽略的一点：很多项目里 :hover 和 :focus 写在同一行规则里，但没考虑键盘用户移入后又鼠标悬停的叠加逻辑——这时候得靠选择器权重或明确写组合态，而不是指望浏览器自动合并。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
