Il selettore hover fa parte della classe pseudo. Questo effetto viene utilizzato per modellare il contenuto nell'HTML quando il cursore del mouse si libra su di essi. Possiamo applicare questo effetto a qualsiasi elemento. Questo articolo contiene un certo utilizzo di base di una classe hover in HTML e CSS.

Scopo dell'effetto hover

In qualsiasi documento o browser, utilizziamo i collegamenti ai siti Web per l'assistenza dell'utente. A tale scopo, possiamo modellare i collegamenti per le pagine che non sono ancora visitate utilizzando la classe di selezione dei collegamenti. Allo stesso modo, per quei collegamenti già visitati, utilizziamo il selettore visitato. Un selettore attivo viene utilizzato per i collegamenti attivi. Questi sono tutti gli stili di collegamento che mostrano gli effetti sul mouse. Se il collegamento e il selettore dei collegamenti visitati sono entrambi presenti nella definizione CSS, utilizziamo una classe di selettore del mouse per vedere l'effetto risultante.

D'altra parte, ogni volta che vogliamo passare su qualsiasi elemento in HTML, provoca alcuni effetti usando alcune proprietà in CSS, sul contenuto esistente o sul nuovo modulo di elemento a seguito del mouse.

Sintassi dell'elemento hover

Content_of_html: hover
// Dichiara il codice CSS o gli effetti che si desidera applicare.

Esempio 1: Hover cambia il colore del testo

Questo esempio si occupa della trasformazione del testo quando spostiamo il cursore del topo verso di esso. Possiamo applicare le diverse condizioni al testo. Ma per ora, le due modifiche di base che seguono sono: la modifica del colore del testo su cui viene applicato il molare e il punto di vista del testo con una modifica del colore di sfondo.

A partire dalla sezione della testa HTML, usa il tag di stile al suo interno mentre stiamo facendo uno stile interno. Usa la sezione Stile all'interno del tag. Una classe hover viene utilizzata per applicare tutti gli effetti sul testo dell'intestazione. Quindi, H1 viene utilizzato con la classe Hover.

H1: hover
Colore bianco;
Background-color: viola;

Vengono applicate le due proprietà, come abbiamo discusso in precedenza. Per impostazione predefinita, il colore dell'intestazione è nero e il colore di sfondo della pagina web è bianco. Ma su Hover, il colore di sfondo di quella porzione specificata diventa viola, quindi il colore del testo cambia anche in bianco.

Codice HTML CSS:

Chiudi il tag di stile e la sezione testa di HTML. Muovendosi verso la porzione del corpo, viene dichiarata una violazione. L'allineamento per l'intestazione1

è impostato sul centro. Chiudi tutti i tag e salva il file degli editor di testo. Per eseguire l'output, dobbiamo eseguire il file nel browser. Durante il salvataggio del file, una cosa dovrebbe essere tenuta a mente: salva il file con l'estensione HTML invece di salvarlo con l'estensione del testo. Apri con il browser predefinito in modo da poter ottenere l'output.

Produzione:
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/video2.MP400: 0000: 0000: 10 Up/giù tasti freccia per aumentare o diminuire il volume.

L'output nel browser viene catturato sotto forma di un video di pochi secondi che porta all'eccesso nella visualizzazione dei risultati. Durante l'esecuzione del file, vedrai che appare una semplice intestazione al centro della pagina web. Quando prendiamo il cursore vicino all'intestazione o si librano sopra l'intestazione, il colore di sfondo e il colore del carattere vengono cambiati. Ogni volta che il cursore viene spostato indietro, torna a default.

Esempio 2: Hover crea un blocco con il testo

A differenza dell'esempio precedente in cui il testo esistente è stato modificato su Hover, in questo esempio viene aggiunto un nuovo contenuto (blocco) di HTML che viene mostrato solo quando ci libramo sul testo specificato. Questo blocco ha anche alcune dimensioni e specifiche. Elaboriamo la procedura.

A partire dalla sezione CSS, tyle a Div. Questo div crea un blocco di contenuti che è il risultato del mouse sul testo. La larghezza e l'altezza sono i due valori di base applicati per formare qualsiasi forma in HTML. Il prossimo è la proprietà di imbottitura. È l'area di distanza del contenuto all'interno di un blocco o una forma. Ad esempio, abbiamo preso un testo all'interno del blocco, quindi la distanza del testo e il confine della forma viene presa come imbottitura. Se viene utilizzata solo l'imbottitura, significa che è la distanza all'interno della scatola su ogni lato. Se l'imbottitura viene eseguita da un lato specificato, poiché abbiamo usato l'imbottitura da destra, significa che è la distanza sul lato destro. Questa proprietà mantiene il testo all'interno del confine del blocco. Altrimenti, ci sono possibilità di superare il testo fuori dal bordo del blocco.

Imbottitura: 20px;
Imbottitura-destra: 50px;

Questo effetto di imbottitura viene applicato per allineare il contenuto interno con il contenuto esterno. Il valore è preso in pixel.

Codice CSS:

La dimensione del carattere e il colore del carattere del testo sono applicati al testo all'interno del blocco. La prossima sezione di stile riguarda l'intestazione che abbiamo applicato nel mouse. Poiché il blocco di contenuto viene creato all'interno del div, Div è incluso in questo tipo di stile insieme. Viene creato il contenuto di forma a blocchi che viene menzionato per formare un display.

H3: Hover + Div
Blocco di visualizzazione;

Dopodiché, chiudi lo stile e le etichette per la testa. Dichiarare un'intestazione all'interno del corpo HTML. Si forma un div. Il testo che verrà menzionato all'interno del blocco è anche scritto all'interno dei tag DIV. Chiudi l'etichetta del corpo.

Codice corporeo HTML:

Salva il codice nel file ed eseguilo nel browser. Come output del codice precedente, abbiamo preso una piccola parte del video per elaborare il funzionamento della classe Hover creata e progettata per creare un blocco con un testo all'interno del blocco.

Produzione:
Video playerhttps: // linuxhint.com/wp-content/uploads/2022/06/video3.MP400: 0000: 0000: 13 Up/giù tasti freccia per aumentare o ridurre il volume.

Il video mostra che viene visualizzato un semplice testo come intestazione quando eseguiamo il file nel browser. Ma quando ci libramo sul testo, provoca una modifica sulla pagina web. In bilico, il testo dell'intestazione rimane lo stesso al momento dell'esecuzione. Ma un blocco sul lato sinistro della pagina viene creato ogni volta che spostiamo il cursore verso l'intestazione. Quando ci allontaniamo dal cursore dall'intestazione, il blocco svanisce. Questo perché la classe Hover crea un blocco e un testo al suo interno. Tutti gli effetti sul blocco e sul testo sono applicati in CSS.

Conclusione

CSS Hover è una proprietà che viene utilizzata per prominente o evidenzia il contenuto di HTML quando spostiamo il cursore verso di loro. Questa funzione è usata principalmente per avvisare qualcosa. In questo articolo, abbiamo spiegato il funzionamento di una classe Hover e come il contenuto di HTML si trasforma in mouse. All'inizio, abbiamo dato una breve panoramica della classe Hover. Abbiamo implementato i due esempi di base dell'effetto hover. Il primo esempio contiene l'effetto sul testo esistente, mentre il secondo esempio è quello di mostrare una forma aggiuntiva che si libra verso il testo esistente mentre il testo esistente rimane lo stesso.