CSS Hover Selector forklaret (med eksempel)

CSS- :hovervælgeren er en af ​​mange pseudoklasser, der bruges til at style elementer. :hoverbruges 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, :hoverparres det ofte med henholdsvis de :link, :visitedog :activevælgerne, der styler henholdsvis ubesøgte, besøgte og aktive links.

Hvis :linkog :visitedregler er i CSS-definitionen, :hoverskal de falde efter dem. Ellers vil typografierne i :hoverreglen 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 :hovervælgeren aktiv, og knappens stil ændres.

Bemærk, at det :hoverkan 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 :hoveri så mange forskellige mobile browsere og enheder som muligt.