Come aggiungere stili CSS in linea su Hover

IL ": Hover"È lo pseudo-selettore che significa che è riconosciuto solo nel foglio di stile CSS. Gli utenti non sono autorizzati ad applicare gli stili in linea CSS su Hover. Tuttavia, per aggiungere CSS in linea su Hover, è meglio dare all'elemento un nome o ID di classe e quindi usarlo nel foglio di stile per applicare gli stili o utilizzare le funzioni JavaScript.

Questo articolo ti istruirà ad aggiungere stili CSS su Hover usando JavaScript.

Come aggiungere gli stili CSS su Hover?

Non ci sono metodi per usare il mouse nel CSS in linea. Tuttavia, per applicare l'effetto hover su un elemento usando il suo ID, controlla l'esempio dato.

Esempio

In HTML, aggiungi un elemento div con il nome di classe "contenuto principale". All'interno di questo div, aggiungi un "

"Elemento per specificare l'intestazione. Dopodiché, aggiungi il ""Elemento con alcuni contenuti specificati con gli attributi:

• • "Href"L'attributo specifica il collegamento.
  • "id"L'attributo è impostato per renderlo accessibile al CSS.
  • Specificare anche le funzioni "mouse_over ()" E "mouse_out ()" dentro. Sul mouse hover, queste funzioni attiveranno e invocheranno la funzione in JavaScript:

Aggiungi hover in CSS in linea

Scuola Linuxhint!

Passiamo alla sezione CSS, in cui gli elementi HTML sono dotati di proprietà di styling.

Elemento del corpo in stile

corpo
Background-color: #863a6f;

Il colore di sfondo dell'elemento corporeo è impostato usando il “colore di sfondo" proprietà.

STANI DIV-Content Main-Content

.contenuto principale
larghezza: 400px;
Altezza: 100px;
Background-color: #D989B5;
Margine: auto;
imbottitura: 20px;
raggio di confine: 10px;

IL ".contenuto principale "Si riferisce al contenuto principale della classe, che è disegnato come segue:

• • "larghezza"La proprietà imposta la larghezza dell'elemento HTML.
  • "altezza"La proprietà definisce l'altezza dell'elemento HTML.
  • "colore di sfondo"La proprietà specifica il colore di sfondo dell'elemento.
  • "margine"La proprietà imposta lo spazio attraverso l'elemento.
  • "imbottitura"La proprietà imposta lo spazio attraverso il contenuto dell'elemento.
  • "raggio di confine"La proprietà viene utilizzata per arrotondare i bordi dell'elemento.

Elemento di stile

UN
Font-size: 20px;
DECORAZIONE DEL TESTO: Nessuno;
imbottitura: 10px;

IL ""L'elemento viene disegnato utilizzando le seguenti proprietà:

• • "dimensione del font"La proprietà specifica la dimensione del carattere dell'elemento.
  • "decorazione del testo"Proprietà con valore nessuno rimuove la sottolineatura dal testo.

JavaScript

Nel codice JavaScript dato:

• • ""Il tag viene utilizzato per specificare il codice di script.
  • "funzione mouse_over ()": La funzione è la parola chiave per definire la funzione mouse_over ().
  • "documento.getElementById ("Hov").stile.color = "giallo""Prende l'ID"Hov"Dell'elemento come parametro e imposta il suo colore di stile come giallo.
  • "funzione mouse_out ()"Usa il"documento.getElementById ("Hov").stile.color = "bianco""Metodo per prendere l'ID"Hov"Del""Elemento come parametro su cui il colore di stile deve essere modificato in bianco.
  • ""È il tag di chiusura.

Qui, puoi vedere, su Hover, lo stile del colore del testo cambia in giallo e quando rimosso, il colore del testo si trasforma in bianco:

Questo è il modo per applicare gli stili CSS su Hover.

Conclusione

IL ": Hover"È lo pseudo-selettore che significa solo in CSS è riconosciuto. Non esistono metodi per aggiungere stili CSS in linea su. Quindi, è meglio utilizzare le funzioni JavaScript per specificare le proprietà sul mouse su un elemento. Questo post ha dimostrato il metodo per aggiungere gli stili CSS su.