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.
: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.
: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
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 1 | Yes | 1 | 4 | 4 | 2 |
<a> element support | 1 | Yes | 1 | 4 | 4 | 2 |
| All elements support | 1 | Yes2 | 1 | 73 4 | 7 | 2 |
| Pseudo-element support | ? | Yes | 28 | ? | ? | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung 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.