To tłumaczenie jest niekompletne. Pomóż przetłumaczyć ten artykuł z języka angielskiego.

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

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1 Yes1442
<a> element support1 Yes1442
All elements support1 Yes2173 472
Pseudo-element support ? Yes28 ? ? ?
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? Yes ? ? Yes1 ?
<a> element support ? ? ? ? ? ? ?
All elements support ? ? ? ? ? ? ?
Pseudo-element support ? ? ? ? ? ? ?

1. As of Safari for iOS 7.1.2, tapping a clickable element causes the element to enter the :hover state. The element will remain in the :hover state until a different element has entered the :hover state.

2. In Edge, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 5381673.

3. In Internet Explorer 8 to Internet Explorer 11, hovering over an element and then scrolling up or down without moving the pointer will leave the element in the :hover state until the pointer is moved. See bug 926665.

4. In Internet Explorer 9 (and possibly earlier), if a <table> has a parent with a non-auto width, overflow-x: auto;, the <table> has enough content to horizontally overflow its parent, and there are :hover styles set on elements within the table, then hovering over said elements will cause the <table>'s height to increase. See a live demo that triggers the bug. One workaround for the bug is to set min-height: 0%; (the % unit must be specified, since unitless and px don't work) on the <table>'s parent element.

Zobacz także

Autorzy i etykiety dokumentu

Autorzy tej strony: darqoo
Ostatnia aktualizacja: darqoo,