Hover-Effecten Toevoegen
Veeg om het menu te tonen
Webelementen kunnen reageren op gebruikersinteractie. Een van de meest voorkomende interacties is het zweven met de muis boven een element.
In CSS wordt dit afgehandeld met de :hover pseudo-klasse.
Wat is :hover?
De :hover pseudo-klasse past stijlen toe wanneer de gebruiker de muisaanwijzer boven een element plaatst.
Basis syntaxis:
selector:hover {
property: value;
}
Voorbeeld:
index.html
styles.css
Wanneer de gebruiker met de muis over de knop beweegt, verandert de achtergrondkleur. Wanneer de cursor zich boven de link bevindt, wordt de link onderstreept.
:hover werkt op de meeste HTML-elementen. Het wordt alleen geactiveerd wanneer de aanwijzer zich boven het element bevindt.
Waarom hover-effecten belangrijk zijn
Hover-effecten verbeteren de gebruikerservaring, bieden visuele feedback en zorgen ervoor dat interfaces interactiever aanvoelen.
Ze worden vaak gebruikt voor links (<a>) en knoppen, evenals navigatiemenu's.
Bedankt voor je feedback!
Vraag AI
Vraag AI
Vraag wat u wilt of probeer een van de voorgestelde vragen om onze chat te starten.
