Qual è la differenza tra focus e attivo

":messa a fuoco"La classe pseudo viene utilizzata per definire le proprietà CSS per lo stato di un elemento quando l'azione è stata eseguita su di esso o è stato selezionato un elemento. D'altra parte, il ":attivo"Pseudo-Class definisce le proprietà CSS per l'istanza in cui viene eseguita l'azione e viene generalmente attivata quando l'utente fa clic o seleziona un determinato elemento.

Questo post dimostrerà il funzionamento di ":messa a fuoco" E ":attivo"Pseudo classi e la differenza tra loro.

: Focus vs: Active

IL ":attivo"Viene attivato esattamente al momento o all'istanza che l'utente fa clic su un elemento e scompare quando l'utente lascia il mouse clic su. Ad esempio, viene attivato quando si fa clic su un pulsante e l'effetto scompare quando il mouse viene impostato. Ma, dopo l'evento (un clic del pulsante), l'effetto delle proprietà aggiunte nel ":messa a fuoco"Resti di classe pseudo.

Esempio: creazione di un pulsante con: Focus e: attivo

Comprendiamo questo con un semplice esempio pratico creando un pulsante e quindi aggiungendo ":messa a fuoco" E ":attivo"Classe pseudo:

Il colore di questo testo cambierà quando fai clic su questo pulsante
Verrà visualizzato come testo in grassetto quando è cliccato

Nel frammento di codice sopra:

• C'è una classe Div chiamata "la mia classe". Lo scopo dell'elemento Div contenente quella classe è solo quello di allineare il contenuto al centro del centro.
• Quindi, c'è un ""Tag per creare un pulsante e tra le etichette del pulsante di apertura e chiusura è il testo da visualizzare sul pulsante.

IL ":messa a fuoco" E ":attivo"Classe pseudo per lo snippet di codice HTML sopra può essere aggiunto nell'elemento in stile CSS come il seguente:

Button
Font-weight: normale;
colore nero;
Margine: 30px;

Button: Focus
Colore: fucsia;

Button: attivo
Font-weight: audace;

.la mia classe
Testo-align: centro;

Nell'elemento in stile CSS sopra:

• C'è un selettore che si riferisce all'elemento pulsante in cui le proprietà CSS, i.e., "Font-peso","colore" E "margine"Sono stati definiti.
• Nel "Pulsante: focus"Classe pseudo, il valore di"coloreLa proprietà "è definita come"fucsia". Questo trasformerà il colore del testo in "fucsia" quando si fa clic sul pulsante.
• Nel "Pulsante: attivo"Pseudo-Classe, il"Font-peso"La proprietà CSS è definita come"grassetto", Questo in grassetto il testo del pulsante sull'istanza quando l'utente fa clic sul pulsante.
• Successivamente, il selettore di classe aggiunto si riferisce all'elemento Div e al "allineamento del testo: centro"La proprietà CSS è stata aggiunta per allineare il pulsante creato all'interno dell'elemento Div al centro.

IL ":messa a fuoco" E ":attivo"Le classi pseudo funzionano nel modo seguente in coordinamento con le proprietà:

Questo riguardava le funzionalità del ":messa a fuoco" E ":attivo"E la differenza tra loro.

Conclusione

IL ":messa a fuoco" E ":attivo"Classi pseudo vengono utilizzati per definire le proprietà CSS per gli elementi nelle istanze in cui un determinato evento viene eseguito su un elemento HTML. L'effetto delle proprietà definite nella classe pseudo "attiva" scompare immediatamente dopo l'evento come un clic del mouse ma l'effetto delle proprietà definite nella classe pseudo ": focus" rimane dopo l'evento eseguito sull'elemento.