:hover
Pasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
Przykład
#.btn {
background: #7c3aed;
transition: background-color 0.2s, transform 0.2s;
}
.btn:hover {
background: #6d28d9;
transform: translateY(-2px);
}<button class="btn" type="button" style="padding: 10px 18px; border: 0; border-radius: 10px; color: #fff; font: 600 15px system-ui, sans-serif; cursor: pointer;">Najedź na mnie</button>Definicja i zastosowanie
#Pseudoklasa :hover włącza się, gdy użytkownik wskazuje element kursorem, i wyłącza, gdy kursor odjedzie. Pasuje do niej nie tylko sam wskazany element, ale też wszyscy jego przodkowie, bo kursor jest nad nimi wszystkimi naraz. Dzięki temu .card:hover .icon zmieni ikonę, gdy kursor znajdzie się gdziekolwiek nad kartą.
Najczęściej łączy się ją z transition, żeby zmiana koloru, cienia czy położenia była płynna. Przy linkach pamiętaj o kolejności reguł: :link, :visited, :hover, :active. Przy równej specyficzności wygrywa reguła zapisana później, więc :visited postawione za :hover zasłoniłoby efekt najechania.
Na ekranach dotykowych kursora nie ma. Przeglądarki zwykle symulują :hover po stuknięciu, a stan potrafi „przykleić się” do elementu, dopóki nie stukniesz gdzie indziej. Dlatego ważnych treści nie ukrywaj za samym najechaniem, a efekty tylko dla myszy zamknij w @media (hover: hover).
Osoby korzystające z klawiatury też nie wywołają :hover. Efekt najechania na elemencie interaktywnym warto powtórzyć w :focus-visible.
Składnia
#selektor:hover { właściwość: wartość; }Typowe zastosowania
#- Najedź kursorem na kartę: zmienia kolor i lekko się unosi. Płynność daje
transitionustawione w stylu bazowym. - Najechanie na kartę zmienia element w jej środku. Ikona reaguje, gdy kursor jest gdziekolwiek nad kartą.
- Tylko sama ikona. Karta się nie zmienia, dopóki kursor nie dotknie gwiazdki.
- Odwrócenie: karta jest przygaszona i rozjaśnia się dopiero pod kursorem.
- Efekt tylko na urządzeniach z kursorem, np. z myszą albo gładzikiem. Na telefonie karta się nie zmieni.
Typowe zastosowania w praktyce
#.demo:hover
transition ustawione w stylu bazowym..demo:hover {
background: #7c3aed;
transform: translateY(-3px);
}.demo:hover .icon
.demo:hover .icon { background: #f59e0b; rotate: 15deg; }.icon:hover
.icon:hover { background: #10b981; scale: 1.25; }.demo:not(:hover)
.demo:not(:hover) { opacity: 0.5; }@media (hover: hover)
@media (hover: hover) {
.demo:hover { background: #0ea5e9; }
}Więcej przykładów
#.lesson .actions {
opacity: 0;
transition: opacity 0.2s;
}
.lesson:hover .actions,
.lesson:focus-within .actions {
opacity: 1;
}<style>
.lesson { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 12px; background: #18181b; }
.lesson button { padding: 6px 10px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit; }
</style>
<div class="lesson">
<span>Lekcja 4: pseudoklasy</span>
<span class="actions"><button type="button">Edytuj</button> <button type="button">Usuń</button></span>
</div>Najedź na wiersz albo kliknij w podgląd i naciśnij Tab. Przyciski pojawiają się w obu przypadkach, bo reguła łączy :hover z :focus-within.
Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie chowaj ważnych informacji ani przycisków wyłącznie za
:hover. Na telefonie i przy obsłudze klawiaturą użytkownik ich nie zobaczy. - Efekt najechania powtórz dla klawiatury:
.btn:hover, .btn:focus-visible { … }. - Przy najechaniu zmieniaj
transform,opacityi kolory. Zmianawidthczymarginprzesuwa sąsiednie elementy i potrafi szarpać układem.
Powiązane hasła
#- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- :activePasuje do elementu w chwili aktywacji, najczęściej gdy przycisk myszy jest wciśnięty nad przyciskiem lub linkiem.
- :focus-withinPasuje do elementu, który sam ma fokus albo zawiera element z fokusem. Pozwala wyróżnić cały formularz lub kartę.
- :not()Wybiera elementy, które nie pasują do podanego selektora ani do żadnego z listy.
- transitionSkrót, który sprawia, że zmiany wartości CSS następują płynnie, a nie skokowo.
- cursorUstawia wygląd kursora myszy nad elementem.
Widzisz błąd albo brakuje przykładu? Napisz do nas.