Pseudoklasa CSS :hover

> Dodaj do ulubionych

Pseudoklasa CSS :hover wybiera element, który obecnie wchodzi w interakcję z urządzeniem wskazującym, czyli w większości przypadków można powiedzieć, że wybiera element, nad którym znajduje się kursor myszy.

Najczęściej pseudoklasa ta jest używana do zmiany koloru łączy po najechaniu na nie kursorem myszy przez użytkownika.

Ponadto pseudoklasy :hover często używa się także do tworzenia menu rozwijanych opartych tylko na CSS, tzn. działających bez użycia JavaScriptu.

W tym przypadku wykorzystuje się selektor potomka: kiedy nad wybranym elementem menu pojawi się kursor, zmieniamy ustawienia własności wyświetlania innego elementu, który reprezentuje podmenu.

Szczegółowy opis techniki tworzenia menu rozwijanego za pomocą CSS i pseudoklasy :hover znajduje się w Kursie HTML i CSS w rozdziale Menu rozwijane w CSS.

Przykład użycia :hover

Poniższa reguła CSS sprawia, że kolor łączy najechanych kursorem myszy zmienia się na kolor zielony:

a:hover {color: green}

Składnia :hover

Składnia pseudoklasy :hover:

:hover {...}