:hover

Pseudo klasa:hover

Właściwość :hover CSS pseudo-class jest używana gdy użytkownik wchodzi w interakcję z elementem za pomocą urządzenia wskazującego, ale niekoniecznie go aktywuje. Generalnie wyzwalanie następuje gdy użytkownik wskaże element kursorem, np. wskaźnikiem myszy.

/* Wybierz każdy element <a>, który zostanie najechany kursorem */
a:hover {
  color: orange;
}

Style zdefiniowane przez pseudo-klasę :active będą nadpisywane przez każdą kolejną powiązaną pseudo-klasę (:link, :visited, lub :active) która ma conajmniej taką samą specyfikację. Aby dopasować odpowiednio linki umieść :hover za :link i :visited ale przed :active zgodnie z zasadą LVHA : :link — :visited — :hover — :active.

Notatka: Pseudo-klasa :hover wykazuje problem na ekranach dotykowych. W zależności od przeglądarki :hover może nigdy nie być  zgodna, może zmienić styl na czas wskazania elementu lub zmienić go do czasu oznaczenia innego elementu. Web developerzy powinni zadbać o to aby elementy działy również na urządzeniach z ograniczeniami obługi funkcji. 

Składnia

:hover

Przykład

HTML

<a href="#">Wskaż ten link.</a>

CSS

a {
  background-color: powderblue;
  transition: background-color .5s;
}

a:hover {
  background-color: gold;
}

Rezultat

Galeria obrazów

Możesz użyć pseudo-klasy :hover do utworzenia galerii obrazów, gdzie pełnowymiarowe obrazy będą wyświetlae wtedy, gdy kursor przesunie się nad miniaturą. Zobacz demo takiego rozwiązania.

Notatka: Dla analogicznego efektu, ale opartego o pseudo-klasę :checked (zastostosowane dla ukrytych radio-box'ów), zobacz demo, zaczerpnięte z strony dotyczącej :checked.

Specyfikacja

Specyfikacja Status Komentarz
HTML Living Standard
The definition of ':hover' in that specification.		 Living Standard  
Selectors Level 4
The definition of ':hover' in that specification.		 Working Draft Allows :hover to be applied to any pseudo-element.
Selectors Level 3
The definition of ':hover' in that specification.		 Recommendation No significant change.
CSS Level 2 (Revision 1)
The definition of ':hover' in that specification.		 Recommendation Initial definition.

Kompatybilne przeglądarki

BCD tables only load in the browser

Zobacz także