Hover CSS: :hover, :active, dan Warna State Link

Cara kerja :hover

:hover adalah pseudo-class yang cocok dengan elemen selama pointer mouse berada di atasnya. Tambahkan ke selector apa saja dan tulis style untuk state hover-nya:

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

Hanya deklarasi di aturan :hover yang berubah; semua yang lain tetap terbawa dari .btn. Saat pointer pergi, elemen kembali ke style normalnya.

Efek hover yang mulus dengan transition

Perubahan saat hover terjadi seketika kecuali kamu menambahkan transition pada aturan normal (bukan aturan :hover), supaya animasinya berjalan saat masuk maupun keluar:

<!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 dan opacity adalah properti yang paling ringan untuk dianimasikan; keduanya tidak menggeser elemen di sekitarnya. Menganimasikan width, height, atau margin membuat halaman menata ulang tata letak di setiap frame. Durasi, delay, dan kurva easing ada di halaman transition CSS.

Warna link: :link, :visited, :hover, :active

Link punya empat state klasik, ditambah fokus keyboard, dan urutan aturannya penting:

Semuanya punya specificity yang sama, jadi aturan yang belakangan yang menang saat dua aturan cocok. Link yang sudah dikunjungi dan sedang di-hover cocok dengan :visited maupun :hover; jika :visited ditulis terakhir, warna hover tidak pernah muncul. Urutan yang aman adalah 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>

Browser membatasi apa yang bisa diubah :visited, untuk mencegah halaman membaca riwayatmu. Hanya properti yang berkaitan dengan warna (color, background-color, border-color, outline-color, dan beberapa lainnya) yang berpengaruh, dan script selalu melihat nilai yang belum dikunjungi.

:active: state saat ditekan

:active cocok selama elemen sedang ditekan. Gerakan kecil membuat tombol terasa nyata:

<!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 pada induk untuk memberi style pada anak

State hover dimiliki oleh elemen di bawah pointer dan setiap leluhurnya. Jadi .card:hover .title memberi style pada judul setiap kali bagian mana pun dari kartu di-hover, dan ide yang sama bisa memunculkan elemen yang tersembunyi:

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

Baris :focus-within itu penting: tanpanya, pengguna keyboard yang menekan Tab ke tombol Delete akan menekan tombol yang tidak terlihat. Pasangkan setiap efek yang muncul saat hover dengan aturan fokus.

Hover di layar sentuh

Ponsel dan tablet tidak punya pointer yang bisa diam di atas elemen. Sebagian besar browser mobile menerapkan :hover pada ketukan pertama dan mempertahankannya sampai kamu mengetuk tempat lain, sehingga style hover bisa terlihat tertahan. Dua aturan menjaga hal ini tetap terkendali:

• Jangan pernah menaruh satu-satunya cara mencapai konten di balik :hover. Menu yang terbuka saat hover juga harus bisa terbuka saat diklik.
• Bungkus efek hover yang murni dekoratif di dalam media query yang memeriksa perangkat hover sungguhan:

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

Kesalahan umum

• Spasi sebelum titik dua. .btn :hover berarti "elemen yang di-hover di dalam .btn". Tulis .btn:hover.
• transition hanya di aturan :hover. Animasinya jadi berjalan saat masuk tetapi langsung melompat saat keluar. Taruh di aturan normalnya.
• Urutan link yang salah. Pertahankan :link, :visited, :hover, :active dalam urutan itu.
• Hover tanpa style fokus. Pengguna keyboard tidak pernah memicu :hover; beri juga elemen interaktif style :focus-visible.
• Hover pada elemen yang tertutup elemen lain. Overlay yang tidak terlihat (sering kali pseudo-element absolute) bisa menangkap pointer. pointer-events: none pada overlay memperbaikinya.