:hover伪类需配合可交互元素生效，常见失效原因包括pointer-events:none、父级遮挡或元素无尺寸；transition应指定具体属性而非all；移动端需用:focus或JS替代:hover。
hover 伪类必须配合可交互元素才生效
很多新手写 :hover 发现没反应，第一反应是“CSS 写错了”，其实更大概率是选中了不能触发鼠标事件的元素。比如对 div 或 span 直接加 :hover 是可以的，但若该元素被 pointer-events: none 拦截、父级遮挡、或本身没有尺寸（height/width 为 0），hover 就不会触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具检查目标元素是否真正“可悬停”：看
:hover状态是否在 Styles 面板中被激活（勾选 “Force element state” →:hover） - 确保元素有明确的渲染区域，比如设置
display: block或至少min-height: 20px - 避免在
disabled的button或input上依赖:hover—— 它们默认禁用指针事件
transition 必须声明变化的属性名，不能只写 all
transition: all 0.3s 看起来省事，但实际会拖慢性能，尤其在移动端。浏览器得监听所有可能变化的 CSS 属性（包括 box-shadow、transform、opacity 等），而多数悬停只改一两个值。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只过渡你真正要变的属性，比如
transition: background-color 0.2s, transform 0.25s - 优先用
transform和opacity做动画 —— 它们能走 GPU 加速，不触发重排（reflow） - 别对
width、height、left、top做 transition，它们会频繁触发重排，卡顿明显
悬停放大时元素溢出容器，需要 overflow 和 transform-origin 配合
常见错误：给按钮加 transform: scale(1.1) 后，边缘被父容器裁掉，或者放大中心偏移，看起来“歪了”。这是因为 transform 默认以元素中心为原点，而容器可能设置了 overflow: hidden。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 显式设置
transform-origin: center（虽然这是默认值，但写出来更可控） - 如果父容器有
overflow: hidden，要么去掉它，要么给子元素加负margin或扩大父容器内边距 - 更稳妥的做法是用
transform: scale(1.1)+z-index: 1并确保父级没有clip-path或mask
移动端 hover 不可靠，必须考虑触摸 fallback
iOS Safari 和安卓 Chrome 在触摸设备上对 :hover 支持极弱：首次点击才触发一次 hover，之后就失效；有些甚至完全不响应。纯靠 :hover 做关键交互（比如下拉菜单、工具提示）会导致功能不可用。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把核心交互逻辑从
:hover迁移到:focus或 JavaScript 的click/touchstart事件 - 用媒体查询做轻量适配：
@media (hover: hover) and (pointer: fine) { .btn:hover { ... } } - 测试时真机连调试器，别只信桌面端模拟器 —— 模拟的 hover 行为和真实触摸差距很大
最常被忽略的一点：hover 动画不是越多越好。三个以上属性同时 transition，或 duration 超过 0.35s，人眼就会觉得“粘滞”。交互反馈要快，最好控制在 0.1–0.25s 之间，且只动一个视觉维度（颜色 / 位移 / 不透明度，三选一）。
