:hover
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
(en-US), 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
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
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
BCD tables only load in the browser