Lära Förbättra Stilar med Användaraktions-Pseudoklasser

Pseudo-klasser för användaråtgärder gör det möjligt att styla element baserat på hur användare interagerar med dem. De används ofta på <button> och <a>-element för att ge visuell återkoppling vid interaktioner.

Syntaxen är följande:

selector:pseudo-class {
  property: value;
}

selector kan vara vilken selektor som helst vi behandlade i tidigare kapitel;
pseudo-class kräver : före deklarationen, och vi lägger inte till något mellanslag.

Notera

Vi kommer att behandla de mest användbara tillståndspseudoklasserna (hover, focus, active och visited).

:hover

Aktiveras när en användare pekar på ett element med muspekaren. Lämplig för att skapa interaktiv visuell återkoppling.

index.html

styles.css

:focus

Aktiveras när ett element får tangentbordsfokus (vanligtvis via Tab-tangenten). För att säkerställa tillgänglighet kombineras ofta hover- och focus-stilar, vilket ger både mus- och tangentbordsanvändare en konsekvent upplevelse.

Skillnaden mellan :hover och :focus

:hover reagerar på muspekarrörelser;
:focus reagerar på tangentbordsaktivitet ("Tab"-tangenten).

I följande exempel har vi samma element med olika pseudoklasser. Observera filen styles.css. Vi kan se att vi kan lägga till samma stilar för hover- och focus-effekter genom att separera selektorn och pseudoklassen med ,.

index.html

styles.css

:active

Aktiveras medan ett element är aktivt, vanligtvis under ett musklick på knappar eller länkar.

index.html

styles.css

:visited

Tillämpas på länkar efter att användaren redan har besökt deras destination. Webbläsare visar vanligtvis obesökta länkar i blått och besökta i lila, om du inte åsidosätter dessa stilar.

index.html

styles.css

1. Vilken pseudoklass aktiveras när en användare för muspekaren över ett element?

2. Vilken pseudoklass används för en länk som redan har besökts?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 6

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Svep för att visa menyn

Syntaxen är följande:

selector:pseudo-class {
  property: value;
}

selector kan vara vilken selektor som helst vi behandlade i tidigare kapitel;
pseudo-class kräver : före deklarationen, och vi lägger inte till något mellanslag.

Notera

Vi kommer att behandla de mest användbara tillståndspseudoklasserna (hover, focus, active och visited).

:hover

Aktiveras när en användare pekar på ett element med muspekaren. Lämplig för att skapa interaktiv visuell återkoppling.

index.html

styles.css

:focus

Skillnaden mellan :hover och :focus

:hover reagerar på muspekarrörelser;
:focus reagerar på tangentbordsaktivitet ("Tab"-tangenten).

index.html

styles.css

:active

Aktiveras medan ett element är aktivt, vanligtvis under ett musklick på knappar eller länkar.

index.html

styles.css

:visited

Tillämpas på länkar efter att användaren redan har besökt deras destination. Webbläsare visar vanligtvis obesökta länkar i blått och besökta i lila, om du inte åsidosätter dessa stilar.

index.html

styles.css

1. Vilken pseudoklass aktiveras när en användare för muspekaren över ett element?

2. Vilken pseudoklass används för en länk som redan har besökts?

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 1. Kapitel 6