:hover :focus :active och :visited
Styla interaktiva tillstånd för länkar och knappar med de vanligaste CSS-pseudoklasserna.
:hover :focus :active och :visited är en gratis lektion i CSS Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för CSS Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad är pseudoklasser?
Pseudoklasser väljer element baserat på deras tillstånd eller relation till andra element. De börjar med ett enkelt kolon : och kräver inte att attribut läggs till i HTML.
:hover
:hover gäller när användarens pekare befinner sig över ett element. Den vanligaste selektorn för interaktiva tillstånd.
<p><a href="#" class="demo-hover">Hover this link</a></p>
<div class="card demo-hover">Hover this card</div>
:focus
:focus gäller när ett element får fokus (via tangentbordets Tab-tangent eller genom programmatisk fokusering). Avgörande för tillgängligheten.
<input type="text" placeholder="Auto-focused input" autofocus />
<button>Click me (focus me too)</button>
:focus-visible
:focus-visible är en smartare variant av :focus — den visar endast fokusmarkeringen när fokus har erhållits via tangentbordet, inte musen. På så sätt får tangentbordsanvändare fokusindikatorer utan fokusmarkeringar efter musklick.
<button autofocus>Keyboard-focused button shows a ring</button>
:focus-within
:focus-within gäller för ett element när något av dess underordnade element har fokus. Användbart för att formge formulärbehållare eller sökfält när de är aktiva.
<form class="search-form"><input type="search" placeholder="Search…" autofocus /></form>
:active
:active gäller medan ett element aktiveras — vid ett musklick eller en beröring. Det ger visuell återkoppling för interaktiva element.
<button class="demo-active">Pressed button (demo state)</button>
:visited
:visited formger länkar som användaren redan har besökt. Av integritetsskäl kan endast ett begränsat antal egenskaper formges med :visited (color, background-color, border-color, outline-color).
<a href="#" class="demo-visited">Visited link</a>
Ordning för länkarnas tillstånd (LVHA)
När alla fyra länkarnas tillstånd formges bör LVHA-ordningen följas för att undvika problem med specificitet: Link, Vvisited, Hhover, Aactive.
<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å pekskärmar
Pekskärmar har inte ett hover-tillstånd på samma sätt som möss. :hover kan aktiveras kortvarigt vid tryck. För beröringsspecifika interaktioner bör :active eller media queryn @media (hover: none) användas.
Kombinera tillstånd
Pseudoklasser kan kedjas ihop för att formge flera tillstånd samtidigt:
<a href="#" class="demo-visited-hover">Visited link being hovered</a>
<button>Click-focused button gets no ring</button>
Övergångar för hover-tillstånd
Skapa mjuka hover-effekter genom att använda övergångar i grundtillståndet (inte i :hover-tillståndet), så att övergången spelas upp i båda riktningarna:
<button class="btn demo-hover">Hover transitions smoothly</button>
Snabbtest
Vilken pseudoklass visar fokusstilar endast vid tangentbordsnavigering, inte vid musklick?
Sammanfattning
:hover aktiveras när pekaren befinner sig över ett element, :focus när ett element får fokus, :active under ett klick och :visited för besökta länkar. Använd :focus-visible för fokusmarkeringar som endast visas för tangentbord. Följ LVHA-ordningen för länkarnas tillstånd. Tillhandahåll alltid synliga fokusindikatorer för god tillgänglighet.
Lär dig CSS med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 40
- Lektioner
- 159
Vanliga frågor
Är lektionen ”:hover :focus :active och :visited” gratis?
Ja – hela texten till ”:hover :focus :active och :visited” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i CSS Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i CSS Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”:hover :focus :active och :visited”?
Styla interaktiva tillstånd för länkar och knappar med de vanligaste CSS-pseudoklasserna. Ni övar på CSS Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig CSS Academy?
Du behöver inga förkunskaper. Utbildningen i CSS Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”:hover :focus :active och :visited”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här CSS Academy-lektionen?
Ja. Varje CSS Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- :hover :focus :active och :visited
- :nth-child och :nth-of-type
- :not() :is() och :where()
- :checked :disabled och pseudoklasser för formulärtillstånd