CSS Hover Selector forklaret (med eksempel)
CSS- :hover
vælgeren er en af mange pseudoklasser, der bruges til at style elementer. :hover
bruges til at vælge elementer, som brugerne holder markøren med eller holder musen over. Det kan bruges på alle elementer, ikke kun på links.
Når det er vant til at style links, :hover
parres det ofte med henholdsvis de :link
, :visited
og :active
vælgerne, der styler henholdsvis ubesøgte, besøgte og aktive links.
Hvis :link
og :visited
regler er i CSS-definitionen, :hover
skal de falde efter dem. Ellers vil typografierne i :hover
reglen ikke blive anvendt på det valgte element.
Syntaks:
a:hover { /* CSS declarations */ }
Svævevælgeren anvender kun de typografier, der er angivet i reglen, når et element går ind i svævetilstanden. Dette er typisk når en bruger svæver over elementet med sin mus.
button { color: white; background-color: green; } button:hover { background-color: white; border: 2px solid green; color: green; }
I eksemplet ovenfor er knappens normale styling hvid tekst på en grøn knap. Når en bruger svæver over knappen med sin mus, bliver reglen med :hover
vælgeren aktiv, og knappens stil ændres.
Bemærk, at det :hover
kan være problematisk på berøringsskærme - forskellige hardware- og mobilbrowserimplementeringer kan medføre, at pseudoklassen i nogle tilfælde udløses og ikke i andre. Sørg for at teste elementer grundigt :hover
i så mange forskellige mobile browsere og enheder som muligt.