Pseudoklasa :hover w CSS

Pseudoklasa :hover w CSS

:hover to pseudoklasa CSS, która pozwala nadać styl elementowi w momencie, gdy użytkownik najedzie na niego kursorem myszy. Najczęściej używa się jej do zmiany wyglądu linków, przycisków, menu, obrazów lub dowolnych innych elementów HTML.

Zastosowanie

Pseudoklasa :hover służy do tworzenia prostych efektów interaktywnych bez użycia JavaScriptu. Można dzięki niej zmienić między innymi:

• kolor tekstu,
• kolor tła,
• obramowanie,
• podkreślenie,
• rozmiar lub cień elementu.

Przykład zmiany koloru tekstu

p:hover {
  color: red;
}

Powyższy kod oznacza, że tekst każdego elementu <p> zmieni kolor na czerwony po najechaniu na niego myszą.

Przykład dla linku

a:hover {
  color: green;
  text-decoration: underline;
}

Po wskazaniu linku kursorem jego kolor zmieni się na zielony i pojawi się podkreślenie.

Ważne na egzaminie

Jeżeli w pytaniu pojawia się sformułowanie „po najechaniu myszą”, poprawną pseudoklasą CSS jest zazwyczaj :hover.

Nie należy mylić jej z:

• :visited — odwiedzony link,
• :active — element aktywowany, np. w momencie kliknięcia,
• :cursor lub :coursor — niepoprawne pseudoklasy CSS.