Dokumentacja CSS z przykładami: Hover

Q: Jak dodać efekt hover w CSS?

Napisz regułę z :hover po selektorze: .btn:hover { background: #1d4ed8; }. Deklaracje działają, dopóki kursor jest nad elementem. Dodaj transition: background 0.2s; do zwykłej reguły, żeby zmiana była animowana.

Q: Czym różni się :hover od :active?

:hover działa, gdy kursor jest nad elementem. :active działa, gdy element jest wciskany, od naciśnięcia przycisku myszy do jego puszczenia. Wciśnięty przycisk zwykle jest jednocześnie w stanie hover i active.

Q: W jakiej kolejności pisać pseudoklasy linków?

:link, :visited, :hover, :active (zapamiętaj LVHA, po angielsku "LoVe HAte"). Mają tę samą specyficzność, więc wygrywa późniejsza reguła; w każdej innej kolejności styl odwiedzonego lub najechanego linku może zasłonić styl hover lub active.

Q: Jak zmienić kolor linku w CSS?

Ostyluj element a: a { color: #2563eb; }, a potem a:visited { color: #7c3aed; } i a:hover { color: #1d4ed8; } dla pozostałych stanów. Ustawienie color na a obejmuje zarówno nieodwiedzone, jak i odwiedzone linki.

Jak działa :hover

:hover to pseudoklasa, która pasuje do elementu, gdy kursor myszy jest nad nim. Dodaj ją do dowolnego selektora i napisz style dla stanu po najechaniu:

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

Zmieniają się tylko deklaracje z reguły :hover; wszystko inne pochodzi z .btn. Gdy kursor opuści element, wraca on do swoich zwykłych stylów.

Płynne efekty hover z transition

Zmiana przy najechaniu jest natychmiastowa, chyba że dodasz transition do zwykłej reguły (nie do reguły :hover), dzięki czemu animacja działa w obie strony:

<!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 i opacity to najtańsze właściwości do animowania; nie przesuwają elementów wokół. Animowanie width, height albo margin zmusza stronę do przeliczania układu w każdej klatce. Czasy trwania, opóźnienia i krzywe przyspieszenia opisuje strona o CSS transition.

Kolory linków: :link, :visited, :hover, :active

Linki mają cztery klasyczne stany, plus fokus z klawiatury, a kolejność reguł ma znaczenie:

Pseudoklasa	Działa, gdy
`:link`	Link nie był odwiedzony
`:visited`	Adres URL jest w historii przeglądarki
`:hover`	Kursor jest nad linkiem
`:active`	Link jest wciskany
`:focus-visible`	Link ma fokus z klawiatury

Wszystkie mają tę samą specyficzność, więc gdy pasują dwie, wygrywa późniejsza reguła. Odwiedzony link, nad którym jest kursor, pasuje zarówno do :visited, jak i do :hover; jeśli :visited stoi na końcu, kolor hover nigdy się nie pokaże. Bezpieczna kolejność to 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>

Przeglądarki ograniczają to, co może zmienić :visited, żeby strony nie mogły odczytać twojej historii. Działają tylko właściwości związane z kolorem (color, background-color, border-color, outline-color i kilka innych), a skrypty zawsze widzą wartość dla nieodwiedzonego linku.

:active: stan wciśnięcia

:active pasuje, gdy element jest wciskany. Niewielkie przesunięcie sprawia, że przycisk wydaje się fizyczny:

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

Najechanie na rodzica, żeby ostylować dziecko

Stan hover należy do elementu pod kursorem i do każdego z jego przodków. Dlatego .card:hover .title stylizuje tytuł, gdy kursor jest nad dowolną częścią karty, a ten sam pomysł pozwala odsłaniać ukryte elementy:

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

Linijka z :focus-within jest ważna: bez niej osoba korzystająca z klawiatury, która przejdzie Tabem do przycisku Delete, wcisnęłaby niewidoczny przycisk. Każdemu odsłanianiu przez hover towarzyszyć powinna reguła dla fokusu.

Hover na ekranach dotykowych

Telefony i tablety nie mają kursora, który zatrzymuje się nad elementem. Większość mobilnych przeglądarek stosuje :hover po pierwszym dotknięciu i utrzymuje go, dopóki nie dotkniesz czegoś innego, więc styl hover może wyglądać na zawieszony. Dwie zasady pomagają nad tym zapanować:

Nigdy nie ukrywaj jedynej drogi do treści za :hover. Menu, które otwiera się po najechaniu, musi też otwierać się po kliknięciu.
Czysto dekoracyjne efekty hover umieszczaj w media query, które sprawdza, czy urządzenie naprawdę obsługuje hover:

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

Częste błędy

Spacja przed dwukropkiem. .btn :hover oznacza "element z hover wewnątrz .btn". Pisz .btn:hover.
transition tylko w regule :hover. Wtedy animacja działa przy najechaniu, ale przy zjechaniu styl wraca skokowo. Umieść ją w zwykłej regule.
Zła kolejność linków. Trzymaj :link, :visited, :hover, :active w tej kolejności.
Hover bez stylu fokusu. Osoby korzystające z klawiatury nigdy nie wywołują :hover; nadaj elementom interaktywnym także styl :focus-visible.
Hover na elemencie zasłoniętym przez inny. Niewidoczna nakładka (często pseudoelement z pozycjonowaniem absolutnym) może przechwytywać kursor. pointer-events: none na nakładce rozwiązuje problem.

Najczęściej zadawane pytania

Jak dodać efekt hover w CSS?

Napisz regułę z :hover po selektorze: .btn:hover { background: #1d4ed8; }. Deklaracje działają, dopóki kursor jest nad elementem. Dodaj transition: background 0.2s; do zwykłej reguły, żeby zmiana była animowana.

Czym różni się :hover od :active?

:hover działa, gdy kursor jest nad elementem. :active działa, gdy element jest wciskany, od naciśnięcia przycisku myszy do jego puszczenia. Wciśnięty przycisk zwykle jest jednocześnie w stanie hover i active.

W jakiej kolejności pisać pseudoklasy linków?

:link, :visited, :hover, :active (zapamiętaj LVHA, po angielsku "LoVe HAte"). Mają tę samą specyficzność, więc wygrywa późniejsza reguła; w każdej innej kolejności styl odwiedzonego lub najechanego linku może zasłonić styl hover lub active.

Jak zmienić kolor linku w CSS?

Ostyluj element a: a { color: #2563eb; }, a potem a:visited { color: #7c3aed; } i a:hover { color: #1d4ed8; } dla pozostałych stanów. Ustawienie color na a obejmuje zarówno nieodwiedzone, jak i odwiedzone linki.

Czy hover działa na telefonie?

Ekrany dotykowe nie mają kursora, który mógłby zatrzymać się nad elementem. Większość mobilnych przeglądarek stosuje :hover po dotknięciu i utrzymuje go, dopóki nie dotkniesz czegoś innego, przez co styl hover może się zawiesić. Umieszczaj efekty tylko dla hover w @media (hover: hover) i nigdy nie chowaj ważnej treści za hover.

Powiązane zagadnienia