: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.

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.

Specyfikacja

Kompatybilne przeglądarki

Zobacz także

• Chromium bug #370155: Don't make :hover sticky on tap on sites that set a mobile viewport
• Chromium bug #306581: Immediately show hover and active states on touch when page isn't scrollable.