Hoverstijlen

Hoverstijlen verwijzen naar stijlen die worden toegepast wanneer de cursor boven een element zweeft met een aanwijzer. Ze worden gebruikt om visuele feedback te geven, de interactiviteit aan te duiden en navigatie te verbeteren. Veelvoorkomende doelwitten zijn hyperlinks, knoppen, kaarten en menu-items.

Technisch gezien worden hover-effekten gerealiseerd met de CSS :hover pseudo-klasse. Vaak worden ze gecombineerd met transities en soms met transformaties om veranderingen vloeiend te animeren. Bijvoorbeeld: a:hover { color: #fff; background-color: #0053ba; } en meestal: transition: all 0.2s ease;

Typische eigenschappen zijn color, background-color, border, box-shadow, transform, opacity en text-decoration, maar ook outline. Verschillende ontwerpstijlen zijn mogelijk, zoals een lichte schaduw, een subtiele verschuiving of een vergroting bij hover.

Toepassingsgevallen: hyperlinks die interactiever worden, knoppen die reageren op muisselectie, kaarten die uitklappen of menu-items die zich openen. Hover-stijlen dragen bij aan micro-interacties en geven feedback zonder extra klikken.

Toegankelijkheid en mobiel: veel apparaten zijn touch-gebaseerd en hebben geen hover. Daarom mogen hoverstates niet de enige aanwijzing voor interactiviteit zijn; gebruik ook :focus-visible voor toetsenbordbediening. Houd rekening met prefers-reduced-motion voor gebruikers die animaties willen uitschakelen.

Best practices: gebruik consistente variabelen, test het contrast bij hover, beperk de duur en intensiteit van animaties, en test op zowel oudere als moderne browsers. Voor menu's: zorg dat hover en focus dezelfde zichtbaarheid bieden.

Cross-browser en implementatie: ondersteuning is breed; voor oudere Safari kan een -webkit-transition of -webkit-transform nodig zijn, maar moderne browsers ondersteunen :hover en CSS-transities.