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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 4Opera Full support 4Safari Full support 2WebView Android ? Chrome Android ? Edge Mobile Full support YesFirefox Android ? Opera Android ? Safari iOS Full support Yes
Notes
Full support Yes
Notes
Notes 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.
Samsung Internet Android ?
<a> element support
Non-standard
Chrome Full support 1Edge Full support YesFirefox Full support 1IE Full support 4Opera Full support 4Safari Full support 2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
All elements support
Non-standard
Chrome Full support 1Edge Full support Yes
Notes
Full support Yes
Notes
Notes 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.
Firefox Full support 1IE Full support 7
Notes
Full support 7
Notes
Notes 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.
Notes 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.
Opera Full support 7Safari Full support 2WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?
Pseudo-element supportChrome ? Edge Full support YesFirefox Full support 28IE ? Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile ? Firefox Android ? Opera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.

Zobacz także

Autorzy i etykiety dokumentu

Autorzy tej strony: darqoo
Ostatnia aktualizacja: darqoo,