Pseudoklasa :hover w CSS

Definicja i użycie

CSS :hover Pseudoklasy są używane do wyboru elementów przy nawiedzaniu myszą.

Wskazówka::hover Pseudoklasy mogą być używane dla wszystkich elementów, a nie tylko dla linków.

Wskazówka:Użyj :link Ustaw styl linków strony nieodwiedzonej, używając :visited Ustaw styl linków strony odwiedzonej, używając :active Ustaw styl aktywnego linku.

Uwaga:W definicji CSS::hover musi być umieszczony :link i :visited！（jeśli istnieje）zanim zacznie działać!

Przykład

Przykład 1

Wybierz i ustaw styl linków przy nawiedzaniu myszą:

a:hover {
  background-color: yellow;
  font-size: 18px;
}

Spróbuj sam!

Przykład 2

Wybierz i ustaw styl elementów <p>, <h1> i <a> przy nawiedzaniu myszą:

p:hover, h1:hover, a:hover {
  background-color: yellow;
}

Spróbuj sam!

Przykład 3

Wybierz i ustaw style dla linków: nieodwiedzony, odwiedzony, przy nawigacji myszą i aktywny

/* Nieodwiedzony link */
a:link {
  color: green;
}
/* Odwiedzony link */
a:visited {
  color: green;
}
/* Link przy nawigacji myszą */
a:hover {
  color: red;
}
/* Aktywny link */
a:active {
  color: yellow;
}

Spróbuj sam!

Przykład 4

Ustaw różne style dla linków:

a.ex1:hover, a.ex1:active {
  color: red;
}
a.ex2:hover, a.ex2:active {
  font-size: 150%;
}

Spróbuj sam!

Przykład 5

Nawiguj nad <span> elementem, aby wyświetlić element <div> (podobnie jak tooltip):

div {
  display: none;
}
span:hover + div {
  display: block;
}

Spróbuj sam!

Przykład 6

Pokazuj i ukrywaj menu 'rozwijane' przy nawigacji myszą:

ul {
  display: inline;
  margin: 0;
  padding: 0;
}
ul li {display: inline-block;}
ul li:hover {background: #555;}
ul li:hover ul {display: block;}
ul li ul {
  position: absolute;
  width: 200px;
  display: none;
}
ul li ul li {
  background: #555;
  display: block;
}
ul li ul li a {display:block !important;}
ul li ul li:hover {background: #666;}

Spróbuj sam!

CSS składnia

:hover {
  deklaracje css;
}

Szczegółowe informacje techniczne

Obsługa przeglądarek

Liczby w tabeli wskazują pierwszą wersję przeglądarki, która w pełni obsługuje tą pseudoklasę.

powiązane strony

教程：CSS linki

教程：CSS pseudoklasy