:hover没生效主因有三：pointer-events:none拦截、选择器优先级不足、元素不可交互；验证需在开发者工具中检查:hover是否高亮；样式应直接同块声明，注意对比度、避免background简写覆盖、CSS变量需预定义；transition须写常态规则中，时长0.1–0.3s为宜；a:visited:hover等组合受浏览器限制无效。
为什么 :hover 没生效？检查这三点
最常见原因是父元素或自身设置了 pointer-events: none，导致悬停事件被拦截；其次是 CSS 选择器优先级不足，被其他规则覆盖；还有就是元素本身不可交互（比如 div 没加 tabindex 且不是默认可聚焦元素），在键盘焦点场景下 :hover 不触发但 :focus 会——不过纯鼠标操作一般不涉及这点。
验证方式：打开浏览器开发者工具，选中元素，在「Styles」面板里看 :hover 状态是否被勾选并高亮生效。没高亮就说明没匹配上。
:hover 中同时改背景色和文字颜色的写法
直接在同一个规则块里声明即可，不需要拆开或嵌套：
button:hover {
background-color: #4a90e2;
color: white;
}
注意点：
立即学习“前端免费学习笔记（深入）”；
- 如果背景色是透明或浅色，文字颜色必须有足够对比度，否则可访问性不达标
- 不要只写
background（简写属性），它可能意外重置background-image或background-size - 若用 CSS 变量，确保变量已在 :root 或组件作用域中定义，例如：
--hover-bg: #4a90e2;
过渡动画让颜色变化更自然
没有 transition 时，颜色切换是瞬时的，体验生硬。加上后能平滑过渡：
a {
color: #333;
transition: color 0.2s ease, background-color 0.2s ease;
}
a:hover {
color: #007bff;
background-color: #f8f9fa;
}
关键细节：
- 把
transition写在常态规则里（非:hover），否则首次悬停会无动画 - 避免写
transition: all 0.2s;，它会过渡所有可动画属性，可能引发意外重绘或性能问题 - 时间值建议控制在
0.1s–0.3s，超过0.3s用户会感知延迟
伪类组合与兼容性陷阱
想让「已访问链接悬停时变色」，写成 a:visited:hover 是无效的——现代浏览器出于隐私限制，禁止对 :visited 应用除 color、cursor、outline 等极少数样式外的修改，background-color 就不在允许之列。
其他易错组合：
-
input:focus:hover合法，但实际几乎不会触发（focus 时 hover 通常已存在） -
button:disabled:hover在多数浏览器中根本不会匹配，禁用按钮不响应鼠标事件 - 在旧版 Safari（:hover 对非
元素需配合cursor: pointer才稳定生效
移动端没有真正意义上的 hover，:hover 规则在 iOS Safari 上仅在点击后短暂触发一次，不能依赖它做核心交互反馈。
