Hover trong CSS: :hover, :active và màu liên kết

:hover hoạt động thế nào

:hover là một pseudo-class khớp với phần tử khi con trỏ chuột đang nằm trên nó. Thêm nó vào bất kỳ selector nào và viết kiểu cho trạng thái 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>

Chỉ những khai báo trong quy tắc :hover thay đổi; mọi thứ khác giữ nguyên từ .btn. Khi con trỏ rời đi, phần tử trở về kiểu bình thường.

Hiệu ứng hover mượt với transition

Thay đổi khi hover diễn ra tức thì, trừ khi bạn thêm transition vào quy tắc bình thường (không phải quy tắc :hover), để chuyển động diễn ra cả lúc vào lẫn lúc ra:

<!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 và opacity là những thuộc tính nhẹ nhất để tạo chuyển động; chúng không xô đẩy các phần tử xung quanh. Tạo chuyển động cho width, height hoặc margin khiến trang phải tính lại bố cục ở mỗi khung hình. Thời lượng, độ trễ và đường cong easing có ở trang transition trong CSS.

Màu liên kết: :link, :visited, :hover, :active

Liên kết có bốn trạng thái kinh điển, cộng thêm trạng thái focus bằng bàn phím, và thứ tự các quy tắc rất quan trọng:

Tất cả đều có cùng độ ưu tiên, nên khi hai quy tắc cùng khớp, quy tắc đứng sau thắng. Một liên kết đã truy cập đang được hover khớp cả :visited lẫn :hover; nếu :visited đứng cuối, màu hover sẽ không bao giờ hiện ra. Thứ tự an toàn là 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>

Trình duyệt giới hạn những gì :visited có thể thay đổi, để ngăn trang web đọc lịch sử duyệt web của bạn. Chỉ các thuộc tính liên quan đến màu (color, background-color, border-color, outline-color và vài thuộc tính khác) có tác dụng, và script luôn thấy giá trị của trạng thái chưa truy cập.

:active: trạng thái đang nhấn

:active khớp khi phần tử đang được nhấn. Một chuyển động nhỏ khiến nút có cảm giác như nút thật:

<!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>

Hover phần tử cha để định dạng phần tử con

Trạng thái hover thuộc về phần tử nằm dưới con trỏ và mọi phần tử tổ tiên của nó. Vì vậy .card:hover .title định dạng tiêu đề bất cứ khi nào bất kỳ phần nào của thẻ được hover, và cùng ý tưởng đó làm hiện ra các phần tử đang ẩn:

<!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>

Dòng :focus-within rất quan trọng: thiếu nó, người dùng bàn phím nhấn Tab đến nút Delete sẽ nhấn vào một nút vô hình. Hãy đi kèm mỗi hiệu ứng hiện ra khi hover với một quy tắc focus.

Hover trên màn hình cảm ứng

Điện thoại và máy tính bảng không có con trỏ dừng trên một phần tử. Phần lớn trình duyệt di động áp dụng :hover ở lần chạm đầu tiên và giữ nó cho đến khi bạn chạm chỗ khác, nên kiểu hover có thể trông như bị kẹt. Hai quy tắc giúp kiểm soát việc này:

• Đừng bao giờ để :hover là cách duy nhất để tiếp cận nội dung. Một menu mở khi hover cũng cần mở được khi bấm.
• Bọc các hiệu ứng hover thuần trang trí trong một media query kiểm tra thiết bị có hover thật:

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

Lỗi thường gặp

• Có dấu cách trước dấu hai chấm. .btn :hover nghĩa là "một phần tử đang được hover bên trong .btn". Viết .btn:hover.
• Chỉ đặt transition trong quy tắc :hover. Khi đó chuyển động chỉ diễn ra lúc vào, còn lúc ra thì giật về ngay. Đặt nó trong quy tắc bình thường.
• Sai thứ tự liên kết. Giữ :link, :visited, :hover, :active theo đúng thứ tự đó.
• Có hover mà không có kiểu focus. Người dùng bàn phím không bao giờ kích hoạt :hover; hãy cho các phần tử tương tác thêm kiểu :focus-visible.
• Hover trên phần tử bị phần tử khác che. Một lớp phủ vô hình (thường là một pseudo-element định vị absolute) có thể bắt mất con trỏ. pointer-events: none trên lớp phủ sẽ sửa được.