:hover

Czytasz angielską wersję tego artykułu, ponieważ nie ma jeszcze tłumaczenia dla tego języka. Pomóż nam przetłumaczyć ten artykuł!

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

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`:hover`	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 4	Safari Full support 2	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android ?	Safari iOS Full support 1 Notes Full support 1 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 Full support 1.0
`<a>` element support Non-standard	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 4	Opera Full support 4	Safari Full support 2	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android ?	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
All elements support Non-standard	Chrome Full support 1	Edge Full support 12 Notes Full support 12 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 1	IE 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 7	Safari Full support 2	WebView Android Full support 37	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android ?	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
Pseudo-element support	Chrome Full support 1	Edge Full support 12	Firefox Full support 28	IE Full support 11	Opera ?	Safari Full support 2	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 28	Opera Android ?	Safari iOS Full support 1	Samsung Internet Android Full support 1.0

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

Ostatnia modyfikacja: Mar 18, 2019, autorzy MDN