Efekty hover i focus

W CSS możemy wzbogacić interakcję użytkownika z elementami na stronie dzięki pseudo-klasom :hover oraz :focus. Pozwalają one m.in. wyróżnić elementy w momencie najechania kursorem (hover) albo podczas przeniesienia na nie fokusu (focus) np. poprzez klawiaturę.

Pseudo-klasa :hover

:hover stosujemy, aby zmienić wygląd elementu po najechaniu na niego kursorem. Najczęściej wykorzystuje się ją do:

• podkreślania linków,
• zmiany koloru tła lub tekstu,
• wyświetlania dodatkowych informacji (np. w rozwijanym menu).

   See the Pen    Untitled by EE-Informatyk.pl (@eeinformatyk)   on CodePen. 
 

Pseudo-klasa focus

focus uaktywnia się, gdy element otrzyma tzw. fokus, czyli stanie się aktywny z perspektywy klawiatury lub czytnika ekranu. Najczęściej dotyczy to pól formularzy (<input>, <textarea>), przycisków oraz linków.

Po przejściu do pola tekstowego za pomocą Tab (lub kliknięcia w nie), element zostanie otoczony niebieskim cieniem, informując użytkownika, że może tam wpisywać dane.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Wskazówki dotyczące dostępności (Accessibility)

• Focus jest kluczowy dla osób, które poruszają się po stronie za pomocą klawiatury.
• Ważne, aby nie usuwać całkowicie obramowania fokusu (lub zapewnić własny, wyraźny styl), ponieważ może to znacząco utrudnić dostępność witryny.
• Pseudo-klasa :focus-visible (obsługiwana w nowszych przeglądarkach) pozwala na pokazywanie fokusu tylko wtedy, gdy użytkownik faktycznie korzysta z klawiatury.

Transition w połączeniu z :hover i :focus

Aby uzyskać płynniejsze przejścia między stanami elementu, można użyć właściwości transition

W efekcie kolor tekstu linku przechodzi łagodnie z #333 do #ff5722 po najechaniu kursorem lub przy przeniesieniu na link fokusu.

.link {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

.link:hover,
.link:focus {
  color: #ff5722;
}

Podsumowanie

Efekty hover i focus to podstawowe narzędzia w CSS, które zwiększają interaktywność i dostępność stron internetowych. Dzięki nim użytkownik otrzymuje czytelne wskazówki dotyczące tego, z którymi elementami może się wchodzić w interakcję, a zastosowanie transition jeszcze bardziej uwydatnia te zmiany, nadając stronie dynamiczny i nowoczesny charakter.