Come impostare ahover in base alla classe

": Hover"È una delle più popolari classe pseudo che viene utilizzata per aggiungere effetto a qualsiasi elemento sul mouse o sul cursore. È riconosciuto solo nel foglio di stile CSS, il che significa che non può essere applicato in CSS in linea. Per applicare ": Hover" sull'elemento, è meglio assegnare l'attributo Classe o ID all'elemento e utilizzare questa Pseudo-Classe al foglio di stile per aggiungere l'effetto Hover.

Questo tutorial spiegherà:

• Cos'è "A: Hover" in CSS?
• Come impostare "A: Hover" in base alla classe?

Cos'è "A: Hover" in CSS?

"A: Hover"Viene utilizzato per aggiungere un effetto hover sui collegamenti incorporati o sul tag di ancoraggio. Qui, "A: Hover" include tag di ancoraggio ""E": hover "pseudo-class. Viene generalmente usato per attivare l'elemento "" in CSS. Può anche aggiungere effetti all'elemento "A" alterando il colore del collegamento, lo stile del cursore, il colore di sfondo e molti altri.

Come impostare "A: Hover" in base alla classe?

Impostare "A: Hover"In base alla classe, prova le istruzioni fornite.

Passaggio 1: crea un contenitore "div"

Inizialmente, crea un contenitore con l'aiuto di ""Tag e assegnarlo un"id"Attributo.

Passaggio 2: crea un altro contenitore "div"

Successivamente, crea un nidificato "div"Container tra il primo contenitore e assegnare un"classe"Attributo con un nome particolare.

Passaggio 3: inserire il tag ""

Successivamente, inserisci il “"Tag che viene utilizzato per collegare una pagina a un'altra. Quindi, inserire l'attributo menzionato all'interno del tag di apertura "", dove:

• "classe"Viene utilizzato per identificare in modo univoco l'elemento con un nome.
• "Href"L'attributo viene utilizzato per contenere l'URL di altre pagina o indirizzo di destinazione:

Pagina principale
Casa
su di me

L'output del codice sopra è il seguente:

Passaggio 4: modella il contenitore principale "Div"

Per modellare il principale contenitore "Div", prima di tutto, accedi al ""Elemento per nome ID con il"#"Selettore. Nel nostro caso, abbiamo usato "#Main-Div". Successivamente, applica le proprietà sotto l'elenco:

#main-div
bordo: 3px blu solido;
Margine: 20px 50px;
imbottitura: 50px;
Font-size: più grande;
Background-color: bisque;

Qui:

• IL "confine"La proprietà viene utilizzata per definire un confine o un sistema attorno all'elemento.
• "margine"Assegna uno spazio al di fuori del confine definito.
• "imbottitura"Viene utilizzato per specificare lo spazio all'interno del confine definito e attorno al contenuto dell'elemento.
• "dimensione del font"La proprietà determina la dimensione del carattere.
• "colore di sfondo"Viene utilizzato per impostare il colore sul retro dell'elemento all'interno di un confine.

Produzione

Passaggio 5: Imposta "A: Hover" in base alla classe

Ora, accedi all'interno "div"Elemento usando la classe assegnata con selettore dot".menu principale"E utilizza il"A: Hover"Pseudo classe per aggiungere un effetto hover al""Elemento.

A tale scopo, applica le proprietà menzionate:

.main-menu a: hover
Colore: RGB (247, 137, 12);
Bordo: 2 px blu punteggiato;
raggio di frontiera: 20%;

Ecco la descrizione per il codice sopra menzionato:

• "colore"La proprietà viene utilizzata per impostare il colore del testo.
• "confine"Definisce un limite attorno al""Elemento. Ad esempio, abbiamo applicato un bordo blu punteggiato su Hover.
• "raggio di confine"Imposta i bordi dell'elemento in una forma arrotondata:

Si trattava di impostare A: Hover in base alla classe in CSS.

Conclusione

Per impostare il "A: Hover"Classe pseudo basata sulla classe, in primo luogo, crea un contenitore di div usando""Tag e assegnalo un attributo di classe. Quindi, inserire un “"Elemento per collegare un'altra pagina Web. Successivamente, accedi all'elemento "Div" con l'aiuto della classe e applica l'effetto hover sul collegamento usando "A: Hover". Questo post ha dimostrato il metodo per l'impostazione di "A: Hover" in base alla classe.