Summary  
This chapter explains how to use the CSS :hover pseudo-class to apply dynamic style changes to elements when the mouse pointer hovers over them.  

General domain of usage  
Web user interfaces

Watch this demonstration to see how the :hover pseudo-class changes the appearance of buttons and links when you move your mouse over them. You'll observe how CSS hover effects provide instant visual feedback and enhance user interaction. Use simple examples. Do not show the full html document stucture. Focus only on the CSS.

Nettsideelementer kan reagere på brukerinteraksjon. En av de vanligste interaksjonene er når brukeren holder musepekeren over et element.

I CSS håndteres dette ved hjelp av pseudo-klassen `:hover`.

## Hva er `:hover`?

Pseudo-klassen `:hover` brukes for å angi stiler når brukeren holder musepekeren over et element.

Grunnleggende syntaks:
```css
selector:hover {
  property: value;
}
```
Eksempel:

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rIHJlbD0ic3R5bGVzaGVldCIgaHJlZj0ic3R5bGVzLmNzcyIgLz4KICA8L2hlYWQ+CiAgPGJvZHk+CiAgICA8YnV0dG9uIGNsYXNzPSJwcmltYXJ5LWJ1dHRvbiI+Q2xpY2sgTWU8L2J1dHRvbj4KICAgIDxhIGhyZWY9IiMiIGNsYXNzPSJzdHlsZWQtbGluayI+TGVhcm4gTW9yZTwvYT4KICA8L2JvZHk+CjwvaHRtbD4=

LyogQ3VycmVudCBmb2N1cyAqLwoucHJpbWFyeS1idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5wcmltYXJ5LWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogbmF2eTsKfQoKLnN0eWxlZC1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5zdHlsZWQtbGluazpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5OwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5wcmltYXJ5LWJ1dHRvbiB7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9Cgouc3R5bGVkLWxpbmsgewogIGNvbG9yOiBibHVlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRyYW5zaXRpb246IHRleHQtZGVjb3JhdGlvbiAwLjNzIGVhc2U7Cn0=

Når brukeren holder musepekeren over knappen, endres bakgrunnsfargen. Når markøren er over lenken, blir lenken understreket.

`:hover` fungerer på de fleste HTML-elementer. Den aktiveres kun når pekeren er over elementet.

Merk

## Hvorfor hover-effekter er viktige

Hover-effekter forbedrer brukeropplevelsen, gir visuell tilbakemelding og gjør grensesnitt mer interaktive.

De brukes ofte for lenker (`<a>`) og knapper, samt navigasjonsmenyer.

Lær det grunnleggende i CSS, stilsett-språket som forvandler utseendet og følelsen på nettsider. Utforsk sentrale konsepter som tekststiler, farger, mellomrom, boksmodellen, Flexbox og dekorative effekter. Bygg ferdigheter for å lage visuelt engasjerende og velstrukturerte nettsider.

Forstå hvordan CSS kobles til HTML og hvordan stiler brukes gjennom selektorer.
Bruk av farger, tekststiler og hover-effekter for å kontrollere visuell presentasjon.

Forbedre typografi ved hjelp av linjehøyde, avstand, skriftegenskaper og egendefinerte fonter. Kontroller skrifttyper, vekt, stil og størrelse for bedre lesbarhet.

Kontroll av layoutstruktur ved bruk av margin, padding, border og bredde-egenskaper. Forståelse av boksstørrelsesatferd og elementvisningstyper som block, inline og inline-block.

Kontroller horisontale og vertikale oppsett ved hjelp av Flexbox-egenskaper. Juster retning, justering og avstand for å strukturere UI-komponenter.

Forbedre oppsett ved bruk av bakgrunnsfarger, bilder, pseudo-elementer og skygger. Style visuelle komponenter for dybde og kontrast.

Legge til hover-effekter

Hva er :hover?

Hvorfor hover-effekter er viktige

Hva er `:hover`?