:hover 失效主因是元素未显式设置基础 color 或 background-color；css reset 可能重置默认色；background-image 存在时需用 background 简写覆盖；transition 应写在默认状态；:visited 仅限极少数颜色属性；移动端 hover 不可靠，需兼顾 :focus 和 js 状态。
必须先给元素显式设置 color 或 background-color，否则 :hover 无法生效——浏览器默认样式会盖掉你的悬停规则。
为什么写了 :hover 却没变色
最常见原因是：元素本身没定义基础颜色。比如只写 a:hover { color: red; }，但没写 a { color: #333; }，那浏览器仍用 UA 样式里的蓝色，:hover 因为权重相同、后声明却无效果可覆盖，实际被忽略。
- 链接必须显式设
a:link { color: ...; }，否则:visited和:hover都可能失效 - 按钮类如
.btn同理，.btn { background-color: #007bff; }是前提，不是可选项 - 若用了 CSS Reset（如 Normalize.css），检查它是否把
a的color设成了inherit或unset - 避免用
!important强行覆盖，优先提升选择器权重，例如用.nav a:hover替代a:hover
:hover 改背景色时，background 和 background-color 要分清
如果元素原本有背景图（background-image），只改 background-color 在 :hover 里是无效的——图片层还在上面，新颜色被遮住了。
- 错误写法：
.card { background-image: url("bg.png"); } .card:hover { background-color: rgba(0,0,0,0.1); }→ 什么也看不见 - 正确写法：
.card:hover { background: rgba(0,0,0,0.1) url("bg.png"); }，用background简写一次性覆盖全部 - 过渡动画要写在默认状态里：
.card { transition: background-color 0.2s ease; }，而不是放在:hover块中 - 慎用
transition: all；它会尝试过渡background-position或background-size，引发意外重绘
:visited 不能当状态管理用，颜色变化极其受限
现代浏览器出于隐私考虑，强制限制 :visited 只能修改极少数颜色相关属性，且不支持 JS 读取计算值。别指望它做“已点击”或“已阅读”状态标记。
- 仅允许的属性：
color、background-color、border-color、outline-color，以及它们的简写（如border） - 以下全部无效：
opacity、font-size、display、transform、visibility，连控制台都不会报错 -
:visited不是交互伪类，它只反映历史访问记录，且无法与:hover或:active组合出复合状态（如a:visited:hover虽语法合法，但样式能力仍受:visited限制） - 真正需要“已点击”反馈，请用 JS 切换 class，而不是依赖伪类
移动端和键盘用户的 :hover 行为差异容易被忽略
桌面端鼠标悬停是持续态，但移动端没有真实 hover；部分浏览器会在触摸开始时短暂触发 :hover，松开后立刻退出——这导致纯靠 :hover 显示的菜单或提示极易闪退。
- 不要把关键操作入口（如下拉项、工具提示）只依赖
:hover显示；必须提供点击/聚焦触发的备用路径 -
:active在触摸设备上仍有效（触摸开始即触发），适合做瞬时按压反馈，但它不是“保持态” - 键盘用户靠 Tab 导航，
:focus才是他们的 hover；记得同时写:hover, :focus，否则可访问性直接掉档 - 若用
@media (hover: hover)做媒体查询，注意它在部分安卓 WebView 中返回 false，不可作为唯一判断依据
真正难的不是写出 :hover，而是判断什么时候不该用它——比如需要持久状态、跨设备一致反馈、或涉及隐私敏感行为时，CSS 伪类从一开始就不该是第一选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
