:hover伪类应直接写在目标元素选择器后，如.button:hover；需配transition控制过渡；伪类顺序须遵从love hate规则；移动端hover不可靠，不触发js事件。
hover伪类写在哪？别套错选择器
直接写在要响应悬停的元素选择器后面，不是写在父容器上，也不是单独声明。很多人把 :hover 写在 .btn 的父级 .container 上，结果鼠标移过去毫无反应——因为悬停事件没触发在目标元素本身。
- 正确：
.button:hover { background: #007bff; } - 错误：
.container:hover .button { ... }（除非你真想等鼠标停在容器上才变按钮样式） - 注意：
:hover只对支持交互的元素稳定生效，<div>、<code><span></span>默认可以，但需确保它有尺寸或内容，否则“悬停不到”transition加不加？不加就卡顿
只写
:hover改颜色或大小，浏览器会立刻跳变，体验生硬。几乎所有真实项目里，你都需要配transition控制过渡节奏。漏掉这句，用户会觉得“反应太冲”或“像没生效”。- 必须指定过渡属性：
transition: background-color 0.2s ease;，不能只写transition: 0.2s;（旧版 Safari 会失效） - 避免全写
transition: all 0.2s;：可能意外过渡height或display，引发布局抖动 - 移动端要注意：
:hover在 iOS Safari 中行为不稳定，首次点击才触发，第二次才真正悬停——别依赖它做关键交互
伪类顺序搞错，hover就失效
CSS 伪类有固定书写顺序，
:hover必须在:link和:visited之后、:active之前，否则会被覆盖。特别是写a标签时，顺序错了，鼠标悬停永远显示默认蓝色。- 正确顺序：
a:link → a:visited → a:hover → a:active - 简记口诀：“LoVe HAte”（Link, Visited, Hover, Active）
- 用预处理器或现代 CSS 模块时，也得按这个逻辑组织规则块，否则打包后顺序可能打乱
hover能触发JS吗？不能，但可以配合
:hover是纯 CSS 行为，不会触发mouseenter事件，也不产生 JS 监听点。想在悬停时发请求、改数据、打日志？得靠 JS 绑定事件，CSS 只负责视觉反馈。- 常见误区：以为给元素加了
.item:hover { opacity: 0.8; }就等于“已监听到悬停”，其实 JS 完全无感知 - 协同方案：用
mouseenter/mouseleave做逻辑，CSS:hover做动画，两者分工明确 - 性能提示：避免在
mouseenter里直接操作 DOM 样式，优先用 class 切换，让 CSS 引擎接管动画
hover 看似简单，但顺序、过渡、设备兼容、JS 协同这四点，任一疏忽都会让效果出不来或体验掉档。尤其是 transition 属性名写错、伪类顺序颠倒、移动端误判 hover 可用性，这三个坑最常让人卡住半天。
- 必须指定过渡属性：
