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.

Webelementer kan reagere på brugerinteraktion. En af de mest almindelige interaktioner er, når musen holdes over et element.

I CSS håndteres dette ved hjælp af `:hover` pseudo-klassen.

## Hvad er `:hover`?

Pseudo-klassen `:hover` anvender stilarter, når brugeren placerer musemarkøren over et element.

Grundlæggende syntaks:
```css
selector:hover {
  property: value;
}
```
Eksempel:

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

LyogQ3VycmVudCBmb2N1cyAqLwoucHJpbWFyeS1idXR0b24gewogIGJhY2tncm91bmQtY29sb3I6IGJsdWU7Cn0KCi5wcmltYXJ5LWJ1dHRvbjpob3ZlciB7CiAgYmFja2dyb3VuZC1jb2xvcjogbmF2eTsKfQoKLnN0eWxlZC1saW5rIHsKICB0ZXh0LWRlY29yYXRpb246IG5vbmU7Cn0KCi5zdHlsZWQtbGluazpob3ZlciB7CiAgdGV4dC1kZWNvcmF0aW9uOiB1bmRlcmxpbmU7Cn0KCi8qIEFkZGl0aW9uYWwgc3R5bGVzIGZvciBiZXR0ZXIgYXBwZWFyYW5jZSAobm90IHRoZSBjdXJyZW50IGZvY3VzKSAqLwpib2R5IHsKICBkaXNwbGF5OiBmbGV4OwogIGp1c3RpZnktY29udGVudDogY2VudGVyOwogIGFsaWduLWl0ZW1zOiBjZW50ZXI7CiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmF5OwogIHBhZGRpbmc6IDE1cHg7Cn0KCi5wcmltYXJ5LWJ1dHRvbiB7CiAgY29sb3I6IHdoaXRlOwogIGJvcmRlcjogbm9uZTsKICBwYWRkaW5nOiAxMHB4IDIwcHg7CiAgZm9udC1zaXplOiAxNnB4OwogIGN1cnNvcjogcG9pbnRlcjsKICBib3JkZXItcmFkaXVzOiA1cHg7CiAgdHJhbnNpdGlvbjogYmFja2dyb3VuZC1jb2xvciAwLjNzIGVhc2U7CiAgbWFyZ2luLXJpZ2h0OiAyMHB4Owp9Cgouc3R5bGVkLWxpbmsgewogIGNvbG9yOiBibHVlOwogIGZvbnQtd2VpZ2h0OiBib2xkOwogIHRyYW5zaXRpb246IHRleHQtZGVjb3JhdGlvbiAwLjNzIGVhc2U7Cn0=

Når brugeren holder musen over knappen, ændres baggrundsfarven. Når markøren er over linket, bliver linket understreget.

`:hover` fungerer på de fleste HTML-elementer. Det aktiveres kun, når markøren er over elementet.

Bemærk

## Hvorfor hover-effekter er vigtige

Hover-effekter forbedrer brugeroplevelsen, giver visuel feedback og gør grænseflader mere interaktive.

De bruges ofte til links (`<a>`) og knapper samt navigationsmenuer.

Behersk det grundlæggende i CSS, sproget til styling, der forvandler udseendet og oplevelsen af websider. Udforsk kernekoncepter såsom tekststilarter, farver, afstand, box-modellen, Flexbox og dekorative effekter. Opbyg færdigheder til at skabe visuelt engagerende og velstrukturerede websider.

Forstå, hvordan CSS forbindes til HTML, og hvordan stilarter anvendes gennem selektorer.
Anvendelse af farver, tekstformatering og hover-effekter til at kontrollere visuel præsentation.

Forbedring af typografi ved hjælp af linjehøjde, afstand, skrifttypeegenskaber og brugerdefinerede skrifttyper. Kontrol af skrifttypefamilier, vægt, stil og størrelse for øget læsbarhed.

Styring af layoutstruktur ved hjælp af margin, padding, kanter og breddeegenskaber. Forståelse af boksstørrelsesadfærd og elementvisningstyper såsom blok, inline og inline-blok.

Styring af horisontale og vertikale layouts ved hjælp af Flexbox-egenskaber. Justering af retning, justering og afstand for at strukturere UI-komponenter.

Forbedring af layouts ved brug af baggrundsfarver, billeder, pseudo-elementer og skygger. Styling af visuelle komponenter for dybde og kontrast.

Tilføjelse af Hover-effekter

Hvad er :hover?

Hvorfor hover-effekter er vigtige

Hvad er `:hover`?