链接点击后 Hover 失效解决方案

解决 a 标签点击后 hover 样式不生效的问题

问题

a 标签点击访问后，:hover 伪类样式失效，鼠标悬停不再有效果。

解答

原因分析

CSS 伪类选择器有优先级规则。当多个伪类同时匹配时，后定义的会覆盖先定义的。如果 :visited 写在 :hover 后面，链接被访问后 :visited 样式会覆盖 :hover。

解决方案：遵循 LVHA 顺序

/* 正确顺序：Link -> Visited -> Hover -> Active */
a:link {
  color: blue;        /* 未访问的链接 */
}

a:visited {
  color: purple;      /* 已访问的链接 */
}

a:hover {
  color: red;         /* 鼠标悬停 */
}

a:active {
  color: orange;      /* 点击瞬间 */
}

错误示例

/* 错误：hover 在 visited 之前，会被覆盖 */
a:hover {
  color: red;
}

a:visited {
  color: purple;      /* 访问后，这个样式覆盖了 hover */
}

完整示例

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 记忆口诀：LoVe HAte（爱恨） */
    a:link    { color: #0066cc; }
    a:visited { color: #551a8b; }
    a:hover   { color: #ff0000; text-decoration: underline; }
    a:active  { color: #ff6600; }
  </style>
</head>
<body>
  <a href="https://example.com">点击测试链接</a>
</body>
</html>

简化写法

如果不需要区分 :link 和 :visited 的样式：

a {
  color: blue;
}

/* hover 和 active 写在后面即可 */
a:hover {
  color: red;
}

a:active {
  color: orange;
}

关键点

伪类顺序必须是 LVHA：:link → :visited → :hover → :active
记忆口诀：LoVe HAte（爱恨）
后定义的同级伪类会覆盖先定义的
:hover 和 :active 必须放在 :visited 之后
如果不区分 link/visited，直接用 a 选择器设置默认样式