Lære Forbedring av Stiler med Brukerhandlings-Pseudoklasser

Brukerhandlings-pseudoklasser lar deg style elementer basert på hvordan brukere samhandler med dem. De brukes ofte på <button> og <a>-elementer for å gi tilbakemelding under interaksjoner.

Syntaksen er som følger:

selector:pseudo-class {
  property: value;
}

selector kan være en hvilken som helst selektor vi har vurdert i de forrige kapitlene;
pseudo-class krever : før deklarasjonen, og vi legger ikke til mellomrom.

Merk

Vi vil se på de mest nyttige tilstands-pseudoklassene (hover, focus, active og visited).

:hover

Utøses når en bruker peker på et element med musepekeren. Velegnet for å skape interaktiv visuell tilbakemelding.

index.html

styles.css

:focus

Aktiveres når et element får tastaturfokus (vanligvis via Tab-tasten). For å sikre tilgjengelighet kombineres ofte hover- og focus-stiler, slik at både mus- og tastaturbrukere får en konsekvent opplevelse.

Forskjellen mellom :hover og :focus

:hover reagerer på musepekeraktivitet;
:focus reagerer på tastaturaktivitet ("Tab"-tasten).

I det følgende eksempelet har vi det samme elementet med ulike pseudoklasser. Vennligst legg merke til styles.css-filen. Vi kan se at vi kan legge til de samme stilene for hover- og focus-effekt ved å skille selektoren og pseudoklassen med ,.

index.html

styles.css

:active

Utøses mens et element aktiveres, vanligvis under et museklikk på knapper eller lenker.

index.html

styles.css

:visited

Gjelder for lenker etter at brukeren allerede har besøkt målet. Nettlesere viser vanligvis ubesøkte lenker i blått og besøkte i lilla, med mindre du overstyrer disse stilene.

index.html

styles.css

1. Hvilken pseudoklasse aktiveres når en bruker holder musepekeren over et element?

2. Hvilken pseudoklasse brukes på en lenke som allerede er besøkt?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 6

Spør AI

Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår

Sveip for å vise menyen

Brukerhandlings-pseudoklasser lar deg style elementer basert på hvordan brukere samhandler med dem. De brukes ofte på <button> og <a>-elementer for å gi tilbakemelding under interaksjoner.

Syntaksen er som følger:

selector:pseudo-class {
  property: value;
}

selector kan være en hvilken som helst selektor vi har vurdert i de forrige kapitlene;
pseudo-class krever : før deklarasjonen, og vi legger ikke til mellomrom.

Merk

Vi vil se på de mest nyttige tilstands-pseudoklassene (hover, focus, active og visited).

:hover

Utøses når en bruker peker på et element med musepekeren. Velegnet for å skape interaktiv visuell tilbakemelding.

index.html

styles.css

:focus

Forskjellen mellom :hover og :focus

:hover reagerer på musepekeraktivitet;
:focus reagerer på tastaturaktivitet ("Tab"-tasten).

index.html

styles.css

:active

Utøses mens et element aktiveres, vanligvis under et museklikk på knapper eller lenker.

index.html

styles.css

:visited

Gjelder for lenker etter at brukeren allerede har besøkt målet. Nettlesere viser vanligvis ubesøkte lenker i blått og besøkte i lilla, med mindre du overstyrer disse stilene.

index.html

styles.css

1. Hvilken pseudoklasse aktiveres når en bruker holder musepekeren over et element?

2. Hvilken pseudoklasse brukes på en lenke som allerede er besøkt?

Alt var klart?

Takk for tilbakemeldingene dine!

Seksjon 1. Kapittel 6