Pseudoklasa :hover w CSS

Pseudoklasa :hover w CSS

Pseudoklasa :hover służy do nadawania stylu elementowi wtedy, gdy użytkownik najedzie na niego kursorem myszy. Nie oznacza ona identyfikatora ani klasy, lecz stan elementu.

Składnia

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

Przykład:

li:hover {
  color: Maroon;
}

Ten zapis oznacza: „gdy użytkownik najedzie myszką na element li, ustaw kolor tekstu tego elementu na Maroon”. Styl nie działa stale na wszystkie elementy listy, tylko w momencie najechania kursorem.

Czego :hover nie oznacza?

li:hover nie jest tym samym co:

#hover {
  color: Maroon;
}

Znak # oznacza selektor identyfikatora, czyli element z id="hover". Natomiast dwukropek : wskazuje pseudoklasę CSS.

Typowe zastosowania

Pseudoklasa :hover jest często używana do:

• zmiany koloru linku po najechaniu,
• podświetlania elementów menu,
• zmiany tła przycisku,
• wskazywania aktywnego elementu interfejsu.

Przykład menu:

nav a:hover {
  background-color: black;
  color: white;
}

Ważne na egzaminie

Jeżeli w kodzie widzisz zapis li:hover, oznacza to styl dla elementu listy w stanie najechania kursorem. Nie dotyczy to wszystkich elementów listy ani elementów z identyfikatorem hover.