: hover - CSS-trucs | CSS Almanac 2025

De :hoverpseudoklasse in CSS selecteert elementen wanneer de muiscursor erover beweegt. Het wordt vaak geassocieerd met link ( ) -elementen.

a:hover ( color: green; text-decoration: underline overline; )

Dus wanneer een link als deze wordt "zweeft" (zoals met een cursor op een apparaat met een muis):

Go to Google

Het wordt groen en heeft een lijn eronder en erboven.

In IE 6 en lager werkte :hover het alleen op links, maar in nieuwere browsers werkt het op elk element. Dit kan met name handig zijn voor zaken als vervolgkeuzemenu's waarin u kunt wachten op het :hover item van een bovenliggend lijstitem en vervolgens het volgende niveau van het geneste menu kunt onthullen. Pas echter op, hover-effecten moeten worden gekoppeld aan een soort actie, want dat is een al lang gevestigd webpatroon.