hover伪类未生效主因是选择器不匹配或元素不可交互；需用开发者工具验证命中、确保display可见、div加cursor:pointer；颜色不变多因层叠覆盖；移动端hover不可靠，应作增强而非依赖；transition避免触发布局重排。
hover 伪类没生效？检查选择器是否匹配元素
最常见的情况是 CSS 选择器压根没选中目标元素，比如写了 .btn:hover，但 HTML 里那个按钮根本没有 class="btn"，或者用了 id 却还用点号写选择器。另外注意：:hover 只对鼠标可交互的元素（如 <a></a>、<button></button>、带 tabindex 的 <div>）稳定生效；纯 <code><div> 默认不响应 hover（尤其在旧版 Safari 或某些移动端 WebView 中）。
<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>用浏览器开发者工具「检查元素」，看对应节点是否被你的 CSS 规则命中（左侧样式面板里找有没有被划掉的 <code>color 或 background-color）
display 值（比如不是 display: none 或 visibility: hidden）<div>，加一句 <code>cursor: pointer 不仅能提示用户可交互，还能帮部分浏览器触发 hover 行为
颜色变不了？确认覆盖顺序和属性可继承性
CSS 层叠规则常让新手困惑：明明写了 a:hover { color: red; }，文字还是蓝的。原因通常是父级或更具体的规则优先级更高，或者你改的是子元素的颜色但没选对层级。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 别只写
color—— 如果背景也想变，得同时设background-color，否则可能只有文字色动，背景不动，显得“没变” - 避免用
!important硬顶，先查开发者工具里哪条规则胜出了（灰色被划掉的那行就是被覆盖的） - 如果目标是按钮内文字，而按钮本身用了
background，记得:hover要作用在按钮上，而不是它的子<span></span>—— 否则移入文字区域才触发，移入按钮空白处不触发
移动端 touch 设备不响应 hover？别依赖它做核心交互
HTML5 标准下，:hover 在多数触摸屏设备（iOS Safari、Android Chrome）上行为不一致：有的延迟触发，有的只在模拟“悬停”时短暂生效（比如长按后），有的干脆忽略。这不是 bug，是规范允许的行为 —— 因为触摸设备没有真正的“悬停”状态。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把 hover 当作增强体验（enhancement），不是功能依赖。关键操作（如展开菜单、显示提示）必须有点击/tap 的 fallback
- 如果必须视觉反馈，考虑用
:active配合 JS 添加临时 class，或监听touchstart/touchend - 测试时真机连 devtools（Chrome DevTools 的 Remote Devices 或 Safari Web Inspector），别只靠桌面模拟器
transition 动画卡顿？别在 hover 里改 layout 属性
想让颜色变化带淡入效果，加 transition: color 0.2s 很自然。但一旦混进 width、height、margin、padding 这类触发布局重排（reflow）的属性，动画就容易掉帧甚至卡死，尤其低端安卓机。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对
color、background-color、transform、opacity这类只触发重绘（repaint）或合成（composite）的属性做 transition - 写法统一用
transition: background-color 0.2s, color 0.2s，别偷懒写transition: all 0.2s—— 它会把所有变化都硬拖进动画，包括你根本没想动的属性 - 如果要“放大+变色”，用
transform: scale(1.05)代替width/height改变，性能好得多
hover 的本质是 CSS 状态响应，不是 JS 事件；它轻量，但受制于选择器精度、层叠逻辑和设备能力。最容易被忽略的是：它在 touch 设备上不可靠，以及过渡动画里掺了 layout 属性就会悄悄拖慢整个页面。别把它当万能开关，该用 JS 的地方就老实用 JS。
