:hover :focus :active og :visited
Utform interaktive tilstander for lenker og knapper ved hjelp av de vanligste CSS-pseudoklassene.
:hover :focus :active og :visited er en gratis leksjon i CSS Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i CSS Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva er pseudoklasser?
Pseudoklasser velger elementer basert på tilstanden deres eller forholdet til andre elementer. De begynner med ett enkelt kolon : og krever ikke at De legger til attributter i HTML.
:hover
:hover gjelder når brukerens peker er over et element. Dette er den vanligste selektoren for interaktive tilstander.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus gjelder når et element får fokus (via Tab-tasten eller programmatisk fokusering). Dette er avgjørende for tilgjengelighet.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible er en smartere versjon av :focus — den viser bare fokusringen når fokuset ble oppnådd via tastaturet, ikke musen. Slik får tastaturbrukere fokusindikatorer uten fokusringer etter museklikk.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within gjelder for et element når et av etterkommerne har fokus. Dette er nyttig for å style skjemabeholdere eller søkefelt når de er aktive.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active gjelder mens et element aktiveres — under et museklikk eller trykk. Det gir visuell tilbakemelding for interaktive elementer.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited styler lenker som brukeren allerede har besøkt. På grunn av personvernhensyn kan bare et begrenset antall egenskaper styles med :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Rekkefølge for lenketilstander (LVHA)
Følg LVHA-rekkefølgen når De styler alle fire lenketilstandene, for å unngå problemer med spesifisitet: Link, Visited, Hover, Active.
<p><a href="#">Unvisited (link)</a></p>
<p><a href="#" class="demo-visited">Visited</a></p>
<p><a href="#" class="demo-hover">Hover</a></p>
<p><a href="#" class="demo-active">Active</a></p>
Hover på berøringsenheter
Berøringsskjermer har ikke en hover-tilstand på samme måte som mus. :hover kan aktiveres kortvarig ved trykk. For berøringsspesifikke interaksjoner bør De bruke :active eller mediespørringen @media (hover: none).
Kombinere tilstander
Pseudoklasser kan lenkes sammen for å style flere tilstander samtidig:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Overgang for hover-tilstander
Lag jevne hover-effekter ved å bruke overganger på grunntilstanden (ikke på :hover-tilstanden), slik at overgangen spilles av i begge retninger:
<button class="btn demo-hover">Hover transitions smoothly</button>
Hurtigsjekk
Hvilken pseudoklasse viser fokusstiler bare for tastaturnavigasjon, ikke museklikk?
Oppsummering
:hover aktiveres når pekeren er over elementet; :focus ved inndatafokus; :active under klikk; :visited for besøkte lenker. Bruk :focus-visible for fokusringer som bare vises ved tastaturbruk. Følg LVHA-rekkefølgen for lenketilstander. Sørg alltid for synlige fokusindikatorer av hensyn til tilgjengeligheten.
Lær deg CSS med en AI-veileder – gratis
Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.
- Kurs
- 40
- Leksjoner
- 159
Ofte stilte spørsmål
Er leksjonen «:hover :focus :active og :visited» gratis?
Ja – hele teksten i «:hover :focus :active og :visited» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av CSS Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i CSS Academy inneholder totalt 4 leksjoner.
Hva lærer jeg i «:hover :focus :active og :visited»?
Utform interaktive tilstander for lenker og knapper ved hjelp av de vanligste CSS-pseudoklassene. Du øver på CSS Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.
Trenger jeg erfaring for å begynne med CSS Academy?
Ingen tidligere erfaring er nødvendig. CSS Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.
Hvor lang tid tar leksjonen «:hover :focus :active og :visited»?
De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.
Kan jeg skrive og kjøre kode i denne CSS Academy-leksjonen?
Ja. Alle CSS Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.
Alle leksjonene i dette kurset
- :hover :focus :active og :visited
- :nth-child og :nth-of-type
- :not() :is() og :where()
- :checked :disabled og skjematilstandspseudoer