Lære Forbedring af Stilarter med Brugerhandlings-Pseudoklasser

Pseudo-klasser for brugerhandlinger gør det muligt at style elementer baseret på, hvordan brugere interagerer med dem. De anvendes ofte på <button> og <a> elementer for at give visuel feedback under interaktioner.

Syntaksen er som følger:

selector:pseudo-class {
  property: value;
}

selector kan være enhver selector, vi har gennemgået i de foregående kapitler;
pseudo-class kræver : før deklarationen, og der må ikke være mellemrum.

Bemærk

Vi vil gennemgå de mest anvendelige tilstands-pseudo-klasser (hover, focus, active og visited).

:hover

Udløses, når en bruger peger på et element med musemarkøren. Velegnet til at skabe interaktiv visuel feedback.

index.html

styles.css

:focus

Aktiveres, når et element modtager tastaturfokus (typisk via Tab-tasten). For at sikre tilgængelighed kombineres hover- og focus-stilarter ofte, hvilket giver både mus- og tastaturbrugere en ensartet oplevelse.

Forskellen mellem :hover og :focus

:hover reagerer på musemarkørens aktivitet;
:focus reagerer på tastaturaktivitet ("Tab"-tasten).

I det følgende eksempel har vi det samme element med forskellige pseudo-klasser. Bemærk venligst filen styles.css. Vi kan se, at vi kan tilføje de samme stilarter for hover- og focus-effekt ved at adskille selektoren og pseudo-klassen med ,.

index.html

styles.css

:active

Udløses, mens et element aktiveres, typisk under et museklik på knapper eller links.

index.html

styles.css

:visited

Anvendes på links, efter brugeren allerede har besøgt deres destination. Browsere viser typisk ubesøgte links i blå og besøgte i lilla, medmindre du tilsidesætter disse stilarter.

index.html

styles.css

1. Hvilken pseudo-klasse aktiveres, når en bruger holder musen over et element?

2. Hvilken pseudo-klasse anvendes på et link, der allerede er blevet besøgt?

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 6

Spørg AI

Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat

Suggested prompts:

Can you explain more about how to use :hover and :focus together for accessibility?

What are some best practices for styling navigation links with pseudo-classes?

Could you show examples of using :active and :visited with links?

Stryg for at vise menuen

Syntaksen er som følger:

selector:pseudo-class {
  property: value;
}

selector kan være enhver selector, vi har gennemgået i de foregående kapitler;
pseudo-class kræver : før deklarationen, og der må ikke være mellemrum.

Bemærk

Vi vil gennemgå de mest anvendelige tilstands-pseudo-klasser (hover, focus, active og visited).

:hover

Udløses, når en bruger peger på et element med musemarkøren. Velegnet til at skabe interaktiv visuel feedback.

index.html

styles.css

:focus

Forskellen mellem :hover og :focus

:hover reagerer på musemarkørens aktivitet;
:focus reagerer på tastaturaktivitet ("Tab"-tasten).

index.html

styles.css

:active

Udløses, mens et element aktiveres, typisk under et museklik på knapper eller links.

index.html

styles.css

:visited

Anvendes på links, efter brugeren allerede har besøgt deres destination. Browsere viser typisk ubesøgte links i blå og besøgte i lilla, medmindre du tilsidesætter disse stilarter.

index.html

styles.css

1. Hvilken pseudo-klasse aktiveres, når en bruger holder musen over et element?

2. Hvilken pseudo-klasse anvendes på et link, der allerede er blevet besøgt?

Var alt klart?

Tak for dine kommentarer!

Sektion 1. Kapitel 6