CSS hover 悬停效果：:hover、:active 与链接颜色

:hover 的工作原理

:hover 是一个伪类，当鼠标指针停在元素上时匹配该元素。把它加到任意选择器后面，再写出悬停状态的样式：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover</title>
  <style>
    .btn {
      background: #2563eb;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      font-size: 16px;
      cursor: pointer;
    }
    .btn:hover {
      background: #1d4ed8;
    }
  </style>
</head>
<body>
  <button class="btn">Hover me</button>
</body>
</html>

只有 :hover 规则里的声明会改变，其余样式都沿用 .btn 的。指针移开后，元素恢复到正常样式。

用 transition 实现平滑的悬停效果

悬停时的变化是瞬间完成的，除非你把 transition 加在普通规则上（而不是 :hover 规则上），这样移入和移出都会有动画：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover transition</title>
  <style>
    .card {
      width: 220px;
      padding: 16px;
      border: 2px solid #e5e7eb;
      border-radius: 10px;
      background: white;
      transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
    }
    .card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 20px rgba(17, 24, 39, 0.15);
      border-color: #2563eb;
    }
  </style>
</head>
<body>
  <div class="card">Hover the card: it lifts, gains a shadow and a blue border.</div>
</body>
</html>

transform 和 opacity 是做动画开销最小的属性；它们不会挤动周围的元素。给 width、height 或 margin 做动画，会让页面在每一帧都重新排版。时长、延迟和缓动曲线见 CSS transition 一页。

链接颜色：:link、:visited、:hover、:active

链接有四个经典状态，外加键盘焦点，而且规则的顺序很重要：

这些伪类的优先级都相同，所以两条规则同时匹配时，后写的胜出。一个被悬停的已访问链接会同时匹配 :visited 和 :hover；如果 :visited 写在最后，悬停颜色就永远不会显示。安全的顺序是 Link、Visited、Hover、Active（LVHA）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Link states</title>
  <style>
    a:link    { color: #2563eb; }
    a:visited { color: #7c3aed; }
    a:hover   { color: #16a34a; text-decoration-thickness: 3px; }
    a:active  { color: #f59e0b; }
    a:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
  </style>
</head>
<body>
  <p><a href="https://example.com/never-visited-page">Hover, then press and hold this link</a></p>
</body>
</html>

为了防止网页读取你的浏览历史，浏览器限制了 :visited 能修改的内容。只有与颜色相关的属性（color、background-color、border-color、outline-color 等少数几个）会生效，而脚本读到的始终是未访问时的值。

:active：按下状态

:active 在元素被按下时匹配。加一点位移，就能让按钮有真实的按压感：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Active</title>
  <style>
    .btn {
      background: #16a34a;
      color: white;
      border: 0;
      padding: 10px 18px;
      border-radius: 6px;
      box-shadow: 0 4px 0 #166534;
      transition: transform 0.05s, box-shadow 0.05s;
    }
    .btn:hover { background: #15803d; }
    .btn:active {
      transform: translateY(4px);
      box-shadow: 0 0 0 #166534;
    }
    .btn:focus-visible { outline: 3px solid #2563eb; outline-offset: 3px; }
  </style>
</head>
<body>
  <button class="btn">Press me</button>
</body>
</html>

悬停父元素来设置子元素样式

悬停状态属于指针下方的元素及其所有祖先元素。所以 .card:hover .title 会在卡片的任何部分被悬停时为标题设置样式，同样的思路也能用来显示隐藏的元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hover parent</title>
  <style>
    .item {
      display: flex;
      justify-content: space-between;
      border: 1px solid #e5e7eb;
      padding: 10px;
      width: 260px;
    }
    .item .actions { opacity: 0; transition: opacity 0.15s; }
    .item:hover .actions,
    .item:focus-within .actions { opacity: 1; }
    .item:hover { background: #eff6ff; }
    .item:hover .name { color: #2563eb; }
  </style>
</head>
<body>
  <div class="item">
    <span class="name">report.pdf</span>
    <span class="actions"><button>Delete</button></span>
  </div>
</body>
</html>

:focus-within 这一行很重要：没有它，用 Tab 键移到 Delete 按钮的键盘用户就会按下一个看不见的按钮。每个靠悬停显示的元素都要配一条焦点规则。

触摸屏上的悬停

手机和平板没有可以停在元素上的指针。大多数移动浏览器会在第一次点击时应用 :hover，并一直保持到你点击别处，所以悬停样式可能看起来“卡住”了。两条规则可以控制住这个问题：

• 永远不要让 :hover 成为访问某些内容的唯一途径。悬停时打开的菜单，点击时也必须能打开。
• 把纯装饰性的悬停效果包进一个检测真实悬停设备的媒体查询里：

@media (hover: hover) {
  .card:hover { transform: translateY(-4px); }
}

常见错误

• 冒号前面多了一个空格。 .btn :hover 的意思是“.btn 里面一个被悬停的元素”。应写成 .btn:hover。
• 只在 :hover 规则上写 transition。 这样移入时有动画，移出时却会直接跳回去。把它写在普通规则上。
• 链接伪类顺序错误。 保持 :link、:visited、:hover、:active 的顺序。
• 有悬停样式却没有焦点样式。 键盘用户永远不会触发 :hover；也要给可交互元素设置 :focus-visible 样式。
• 悬停的元素被别的元素盖住了。 一个看不见的遮罩层（通常是绝对定位的伪元素）可能会截获指针。给遮罩层加上 pointer-events: none 即可解决。