: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 上仅在点击后短暂触发一次，不能依赖它做核心交互反馈。