Hva er forskjellen mellom fokus og aktiv

“:fokus”Pseudoklasse brukes til å definere CSS-egenskapene for tilstanden til et element når handlingen er utført på det eller et element er valgt. På den annen side ":aktiv”Pseudoklasse definerer CSS-egenskapene for forekomsten når handlingen utføres, og den utløses vanligvis når brukeren klikker eller velger et bestemt element.

Dette innlegget vil demonstrere arbeidet med ":fokus”Og“:aktiv”Pseudoklasser og forskjellen mellom dem.

: Fokus vs: aktiv

“:aktiv”Utløses nøyaktig på det tidspunktet eller forekomsten brukeren klikker på et element og forsvinner når brukeren forlater museklikk. For eksempel utløses den når en knapp klikkes og effekten forsvinner når musen er satt gratis. Men etter hendelsen (et knappeklikk), effekten av egenskapene som er lagt til i ":fokus”Pseudoklasse gjenstår.

Eksempel: Opprette en knapp med: fokus og: aktiv

La oss forstå dette med et enkelt praktisk eksempel ved å lage en knapp og deretter legge til ":fokus”Og“:aktiv”Pseudoklasser:

Fargen på denne teksten vil endre seg når du vil klikke på denne knappen
Det vises som fet tekst når du klikker

I ovennevnte kodebit:

• Det er en div -klasse som heter “klassen min”. Hensikten med Div -elementet som inneholder den klassen er bare å justere innholdet inni det til sentrum.
• Deretter er det en "”Tag for å opprette en knapp, og mellom åpnings- og lukkeknappemerkene er teksten som skal vises på knappen.

“:fokus”Og“:aktiv”Pseudoklasser for ovennevnte HTML-kodebit kan legges til i CSS-stilelementet som følgende:

knapp
Font-vekt: normal;
farge svart;
Margin: 30px;

Knapp: Fokus
Farge: Fuchsia;

Knapp: aktiv
Fontvekt: fet;

.klassen min
tekst-align: sentrum;

I CSS -stilelementet ovenfor:

• Det er en velger som refererer til knappelementet der CSS -egenskapene, i.e., “Fontvekt”,“farge”Og“margin”Er blitt definert.
• I “Knapp: Fokus”Pseudoklasse, verdien av“farge”Eiendom er definert som“Fuchsia”. Dette vil gjøre fargen på teksten til “Fuchsia” når knappen er klikket.
• I “Knapp: aktiv”Pseudoklasse,“Fontvekt”CSS -egenskap er definert som“dristig”, Dette vil fete knappeteksten på forekomsten når brukeren klikker på knappen.
• Deretter refererer den ekstra klassevelgeren til DIV -elementet, og "Tekstalign: Center”CSS -egenskap er lagt til for å justere knappen som er opprettet inne i DIV -elementet til sentrum.

“:fokus”Og“:aktiv”Pseudoklasser fungerer på følgende måte i koordinering med egenskaper:

Dette handlet om funksjonalitetene til ":fokus”Og“:aktiv”Og forskjellen mellom dem.

Konklusjon

“:fokus”Og“:aktiv”Pseudoklasser brukes til å definere CSS-egenskapene for elementene i tilfeller når en viss hendelse utføres på et HTML-element. Effekten av egenskapene som er definert i “: Aktiv” pseudoklasse forsvinner øyeblikkelig etter hendelsen som et museklikk, men effekten av egenskaper definert i “: fokus” pseudoklasse forblir etter hendelsen utført på elementet.