Lära Förbättra Stilar med Användaraktiverade Pseudoklasser

Pseudo-klasser för användaråtgärder används för att styla ett interaktivt element baserat på dess aktuella tillstånd. Detta hjälper till att uppmuntra användare och informera dem om vad som just har hänt. Vanligtvis lägger vi till tillståndspseudo-klasser på <button>- och <a>-elementen.

Syntaxen är följande:

selector:pseudo-class {
  property: value;
}

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

Obs

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

:hover

Pseudo-klassen :hover används för att reagera på användaråtgärder när de interagerar med ett objekt med en pekdon, till exempel när muspekaren hålls över objektet. Detta kan testas i följande exempel genom att hålla muspekaren över button- och a-elementen för att se effekten.

index.html

styles.css

:focus

Pseudo-klassen :focus fungerar på ett liknande sätt som pseudo-klassen :hover. Den reagerar på att ett element får fokus, vilket vanligtvis uppnås genom tangentbordsnavigering med "Tab"-tangenten. För att säkerställa konsekvent beteende för interaktiva element för alla användare rekommenderas att använda båda pseudo-klasserna tillsammans vid styling. På så sätt får både användare som navigerar med musen och de som använder tangentbordet samma upplevelse.

Skillnaden mellan :hover och :focus

:hover reagerar på muspekarens aktivitet;
:focus reagerar på tangentbordsaktivitet ("Tab"-tangenten).

I följande exempel har vi samma element med olika pseudoklasser. Var uppmärksam på 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

:active aktiveras när ett objekt aktiveras, till exempel vid klick på en länk. Även om vilket element som helst kan aktiveras används denna pseudoklass vanligtvis för länkar och knappar.

index.html

styles.css

:visited

:visited-pseudoklassen tillämpas på länkar som har besökts. Som standard visas länkar i blått och ändras till lila när de har besökts.

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

Suggested prompts:

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

What are some best practices for styling interactive elements with these pseudo-classes?

Can you show examples of using :active and :visited as well?

Awesome!

Completion rate improved to 2.56

Svep för att visa menyn

Syntaxen är följande:

selector:pseudo-class {
  property: value;
}

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

Obs

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

:hover

index.html

styles.css

:focus

Skillnaden mellan :hover och :focus

:hover reagerar på muspekarens aktivitet;
:focus reagerar på tangentbordsaktivitet ("Tab"-tangenten).

index.html

styles.css

:active

:active aktiveras när ett objekt aktiveras, till exempel vid klick på en länk. Även om vilket element som helst kan aktiveras används denna pseudoklass vanligtvis för länkar och knappar.

index.html

styles.css

:visited

:visited-pseudoklassen tillämpas på länkar som har besökts. Som standard visas länkar i blått och ändras till lila när de har besökts.

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