:hover伪类需配合可交互元素且确保元素有渲染区域、未被遮挡；transition须写在基础状态而非:hover中；表单控件hover兼容性差，需包裹处理；多伪类按link→visited→hover→active→focus顺序书写；必须提供:focus fallback保障可访问性。
hover伪类必须配合可交互元素才能生效
直接给 <div> 或 <span> 加 :hover 没问题，但若该元素被设为 pointer-events: none，或父级遮挡、z-index 被盖住，悬停就完全没反应。常见于弹窗蒙层未关、图标用 <svg> 但外层 <div> 没设宽高导致点击区域为空。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的“检查元素”功能，鼠标悬停时看样式面板里
:hover是否被激活（Chrome 会标亮） - 确保目标元素有明确的渲染区域：比如
display: inline元素加:hover时，若内容为空或只含空格，hover 区域实际为 0 - 移动端 Safari 对
:hover支持有限，部分设备需点击后才触发一次，不能依赖它做核心交互
transition 和 hover 配合时的性能陷阱
transition 写在非 :hover 规则里才有效——很多人误把 transition 塞进 :hover 块中，结果动画只在移出时播放，悬停瞬间无过渡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 动画属性应写在基础状态（如
a或.btn），:hover只负责改值，例如：a { color: #333; transition: color 0.2s ease; }<br>a:hover { color: #007bff; } - 避免对
width、height、left、top等触发布局重排（reflow）的属性做过渡；优先用transform和opacity - 复杂动画建议用
@keyframes+animation，:hover控制animation-play-state，更可控
hover 在表单控件和按钮上的兼容性差异
原生 <input type="checkbox"> 和 <select> 在部分浏览器（尤其是旧版 Edge 和 iOS Safari）上不支持直接 :hover，必须包裹一层标签并监听其 hover。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 自定义 checkbox/radio 时，把真实
<input>设为position: absolute; opacity: 0，用相邻兄弟选择器input + label:hover触发样式变化 - 按钮类组件慎用
:hover改变background-color同时又改border-color：某些低配安卓机渲染慢，会出现颜色错位闪动 - 禁用态按钮（
disabled）的:hover在 Chrome/Firefox 中默认不触发，需显式写button:disabled:hover并设cursor: not-allowed提示用户
伪类嵌套与层级冲突的实际表现
CSS 没有真正的“嵌套”，:hover 和其他伪类组合时顺序很关键。比如 a:focus:hover 是无效的，浏览器会忽略；正确顺序是 a:hover:focus（先悬停再聚焦）或 a:focus:hover（先聚焦再悬停），但后者实际很少触发。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 多伪类组合按「状态流」从左到右写：
:link → :visited → :hover → :active → :focus，这是规范推荐顺序 - 使用
:is()可简化重复 hover 写法，例如：:is(button, .btn):hover { background: #0056b3; } - 当
:hover样式被更高权重规则覆盖（如内联 style 或!important），要检查计算样式面板里的“已应用”条目，而非仅看源码顺序
hover 表面简单，但真正稳定跨端可用，得抠清渲染层行为、伪类触发时机和过渡属性的硬件加速路径。最常被忽略的是：没有 hover 的 fallback —— 键盘 Tab 进入时，:focus 样式没同步设计，等于砍掉了一半可访问性。
