hover伪类不生效主因是父元素无内容或高度为0导致无法悬停；需确保元素可见、未被pointer-events: none拦截，注意移动端无效应改用:active或媒体查询@media (hover: hover)。
hover伪类不生效的常见原因
最常遇到的是父元素没内容或高度为0，导致子元素根本“悬停不到”。:hover只作用于有渲染盒（rendering box）的元素，空div、未设置width/height又没子内容的容器，鼠标划过去实际没触发任何事件。
- 检查目标元素是否在文档流中可见（非
display: none、非visibility: hidden） - 确认没有父级
pointer-events: none意外拦截了鼠标事件 -
a标签默认有下划线和颜色，但若被text-decoration: none和color重置后，hover效果容易被误判为“没反应”——其实样式已变，只是你没写变化项
transition配合hover实现平滑过渡
纯:hover切换是瞬时的，加transition才能看出“动效”。但要注意：不是所有CSS属性都支持过渡，比如display不能过渡，height从0到auto也不行。
- 优先用
opacity、transform、background-color这类可硬件加速且支持过渡的属性 - 写
transition时建议明确指定属性名，避免transition: all 0.3s引发意外动画（比如不小心过渡了box-shadow或font-size） - 示例：
a { color: #333; transition: color 0.2s ease; } a:hover { color: #007bff; }
hover在移动端无效怎么办
手机没有“悬停”概念，:hover在iOS Safari和Android Chrome里默认只在模拟桌面模式或极少数场景触发（比如长按后短暂生效），不能当作点击前的反馈逻辑来依赖。
- 真要兼容触屏设备，得用
:active做按下态，或结合JavaScript监听touchstart/touchend - CSS里可加
@media (hover: hover) and (pointer: fine)媒体查询，把:hover样式包裹起来，让只支持精细指针的设备才加载 - 别试图用
ontouchstart给body加class再模拟hover——这会破坏语义，且首次触摸前无反馈
伪类层级与覆盖顺序容易出错
:hover本身没有特殊权重，它依附于基础选择器。很多人以为button:hover比.btn:hover优先级高，其实完全取决于前面的选择器强度。
立即学习“前端免费学习笔记（深入）”；
- 如果
.nav-link:hover没生效，先看是不是被更早声明的a:hover（无类名）覆盖了——后者虽简单，但因出现在后面而胜出 - 链接有四个状态伪类：
:link、:visited、:hover、:active，按LVHA顺序写才能保证预期行为（比如:hover必须写在:link和:visited之后） - 用
!important硬顶只是掩盖问题，真正该做的是理清CSS源码顺序和选择器特异性
:focus、:checked或JS控制的class切换——强行用hover模拟开关或菜单展开，迟早掉坑里。 
