:hover :focus :active i :visited
Nauczy się Pan/Pani stylizować interaktywne stany linków i przycisków za pomocą najczęściej używanych pseudo-klas CSS.
:hover :focus :active i :visited to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym są pseudoklasy?
Pseudoklasy wybierają elementy na podstawie ich stanu lub relacji z innymi elementami. Zaczynają się od pojedynczego dwukropka : i nie wymagają dodawania atrybutów do HTML.
:hover
:hover działa, gdy wskaźnik znajduje się nad elementem. To najczęściej używany selektor stanu interaktywnego.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus działa, gdy element uzyskuje fokus (za pomocą klawisza Tab lub programowo). Ma kluczowe znaczenie dla dostępności.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible to inteligentniejsza wersja :focus — wyświetla wskaźnik fokusu tylko wtedy, gdy fokus uzyskano za pomocą klawiatury, a nie myszy. Dzięki temu użytkownicy klawiatury widzą wskaźniki fokusu, ale kliknięcia myszą nie powodują ich wyświetlania.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within działa na elemencie, gdy fokus ma dowolny z jego elementów potomnych. Przydaje się do stylowania kontenerów formularzy lub pasków wyszukiwania, gdy są aktywne.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active działa podczas aktywowania elementu — w trakcie kliknięcia myszą lub dotknięcia. Zapewnia wizualną informację zwrotną dla elementów interaktywnych.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited styluje linki, które użytkownik już odwiedził. Ze względów prywatności za pomocą :visited można stylować tylko ograniczony zestaw właściwości (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Kolejność stanów linków (LVHA)
Podczas stylowania wszystkich czterech stanów linków należy zachować kolejność LVHA, aby uniknąć problemów ze specyficznością: Link (łącze), Visited (odwiedzone), Hover (najechanie), Active (aktywne).
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Stan hover na urządzeniach dotykowych
Ekrany dotykowe nie mają stanu hover w taki sam sposób jak urządzenia obsługiwane myszą. :hover może zostać na krótko aktywowany podczas dotknięcia. W interakcjach przeznaczonych dla urządzeń dotykowych należy używać :active lub zapytania medialnego @media (hover: none).
Łączenie stanów
Pseudoklasy można łączyć, aby jednocześnie stylować wiele stanów:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Płynne przejścia stanu hover
Płynne efekty hover uzyskuje się dzięki przejściom zastosowanym w stanie bazowym (a nie w stanie :hover), aby przejście działało w obu kierunkach:
<button class="btn demo-hover">Hover transitions smoothly</button>
Szybkie sprawdzenie
Która pseudoklasa wyświetla style fokusu tylko podczas nawigacji za pomocą klawiatury, a nie po kliknięciu myszą?
Podsumowanie
:hover aktywuje się po umieszczeniu wskaźnika nad elementem; :focus po uzyskaniu fokusu przez element; :active podczas kliknięcia; :visited dla odwiedzonych linków. Należy używać :focus-visible do wyświetlania wskaźników fokusu tylko podczas obsługi klawiaturą. W przypadku stanów linków należy zachować kolejność LVHA. Ze względów dostępności zawsze należy zapewniać widoczne wskaźniki fokusu.
Często zadawane pytania
Czy lekcja „:hover :focus :active i :visited” jest bezpłatna?
Tak — pełny tekst „:hover :focus :active i :visited” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „:hover :focus :active i :visited”?
Nauczy się Pan/Pani stylizować interaktywne stany linków i przycisków za pomocą najczęściej używanych pseudo-klas CSS. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „:hover :focus :active i :visited”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- :hover :focus :active i :visited
- :nth-child i :nth-of-type
- :not() :is() i :where()
- :checked :disabled i pseudo-klasy stanu formularza