Pseudoklasa CSS :hover

Pseudoklasa CSS :hover

:hover to pseudoklasa CSS, która pozwala zastosować styl do elementu w momencie, gdy użytkownik najedzie na niego kursorem myszy. Jest często używana do tworzenia prostych efektów interaktywnych bez JavaScriptu.

Zastosowanie

Pseudoklasa :hover może być użyta m.in. do:
- zmiany koloru linku po najechaniu,
- podświetlania przycisku,
- wyróżniania wiersza tabeli,
- zmiany tła elementu menu.

Przykład dla tabeli

Aby wyróżnić wiersz tabeli po najechaniu kursorem, stosuje się selektor tr:hover:

tr:hover {
  background-color: lightblue;
}

Oznacza to: „zastosuj styl do elementu tr, gdy znajduje się nad nim kursor myszy”.

Przykład z tabelą:

<table>
  <tr><td>Jan</td><td>Kowalski</td></tr>
  <tr><td>Anna</td><td>Nowak</td></tr>
</table>

tr:hover {
  background-color: #eeeeee;
}

Po najechaniu kursorem na dowolny wiersz tabeli jego tło zmieni kolor.

Ważne na egzaminie

Do efektu „po najechaniu kursorem” używa się :hover, a nie:
- :visited — dotyczy odwiedzonych linków,
- ::first-line — dotyczy pierwszej linii tekstu,
- klasy CSS — klasa może nadać styl, ale sama nie reaguje na najechanie myszą.

Najważniejszy zapis do zapamiętania:

selektor:hover {
  właściwość: wartość;
}