hover样式应与基础样式写在同一选择器块中，确保顺序正确；transition须定义在常态下，hover仅改触发值；优先使用transform和opacity实现动画以提升性能。
hover 样式必须写在元素自身选择器里
很多人把 :hover 单独提出来写成独立规则，比如先写 .btn { color: blue; }，再写 .btn:hover { color: red; } —— 这本身没错，但一旦顺序反了（比如 hover 规则在前），且没加 !important，就可能被后续普通状态覆盖。CSS 优先级相同的情况下，后声明的规则生效，所以 :hover 必须紧跟在对应元素的基础样式块之后，或至少确保它在样式表中处于更靠后的位置。
更稳妥的做法是把 hover 和常态写在一起：
.card {
background: #f9f9f9;
transition: background 0.2s;
}
.card:hover {
background: #eef2ff;
}
- 避免拆成两段定义后忘记顺序
- transition 必须写在常态里，hover 中只改触发值，否则鼠标移入瞬间会“跳”
- 如果用 CSS-in-JS 或模块化方案（如 CSS Modules），确保
:hover和基础类名在同一个作用域内
hover 配合 transform 和 opacity 最安全
用 transform 和 opacity 做 hover 动画，性能远好于改 width、height、left、top 这类触发布局重排（reflow）的属性。浏览器对这两者做了硬件加速优化，动画更顺滑，尤其在移动端。
-
transform: scale(1.05)比width: 110%更推荐 -
opacity: 0.8可以替代background: rgba(0,0,0,0.2)（后者可能触发重绘） - 慎用
margin或padding动画：会挤压邻近元素，造成意外位移
伪类组合要小心层级和可访问性
:hover 和 :focus 经常一起用，但写法不对会导致键盘用户无法看到焦点样式。比如只写 a:hover，不写 a:focus，Tab 切换时链接就没高亮。
立即学习“前端免费学习笔记（深入）”；
