Come cambiare l'immagine su Hover usando CSS

Hovering è una tecnica che utilizza un dispositivo di puntamento per interagire con l'elemento. Può essere usato per selezionare o modellare vari elementi CSS come pulsanti, immagini, menu e molti altri. L'applicazione del molare su un elemento cambierà il suo stato quando un topo innesca l'evento specificato.

L'obiettivo di questo manuale è esplorare come cambiare un'immagine su Hover usando CSS. Quindi, iniziamo!

Cos'è: hover in CSS?

Il: Hover è un elemento di Pseudo-Classe usato per cambiare lo stato degli elementi HTML quando un topo lo innesca. Questo selettore CSS viene utilizzato principalmente per stile o selezionare elementi. Tuttavia, non può essere applicato ai collegamenti.

Sintassi

La sintassi di: Hover è riportata di seguito:

elemento: hover
Codice CSS ..

Qui, "elemento"Si riferisce all'elemento in cui si desidera applicare l'effetto hover.

Ora passeremo all'esempio pratico di cambiare l'immagine su Hover usando CSS.

Esempio: come cambiare l'immagine su Hover usando CSS?

Per modificare prima l'immagine su Hover, aggiungi due immagini nella sezione HTML. La prima immagine è per lo stato attivo e il prossimo è per lo stato del bordo.

Passaggio 1: aggiungi immagini

Ai fini specificati, aggiungeremo due immagini, "Immagine1" E "Immagine2"E assegna il nome della classe alla seconda immagine come"Hover_img".

Html

Passaggio 2: immagini di stile

Ora, spostati sul CSS per impostare la posizione di entrambe le immagini usando "posizione" proprietà. Imposteremo la sua posizione come "assoluto"Per posizionarlo assolutamente con riferimento al suo genitore più vicino.

CSS

.img
Posizione: assoluto;

Questo mostrerà il seguente risultato:

Nel passaggio successivo, imposteremo la seconda immagine davanti alla prima. Per fare ciò, imposteremo la posizione dell'immagine come "assoluto"E imposta la posizione superiore e sinistra come"0". L'uso di questa immagine è posizionato davanti alla prima immagine, ma vogliamo visualizzare la seconda immagine quando un mouse si libra su di essa. Quindi, impostare il valore di visualizzazione come "nessuno"Mostrerà il risultato desiderato:

.hover_img
Posizione: assoluto;
Top: 0;
a sinistra: 0;
visualizzazione: nessuno;

L'output del codice dato è il seguente:

La seconda immagine è nascosta con successo dietro la prima immagine.

Ora, passa al passaggio successivo.

Passaggio 3: modifica l'immagine su Hover

Successivamente, usa ": Hover"E seleziona".img"Per applicare il mouse all'elemento selezionato. Quindi, assegna il nome della classe della seconda immagine ".Hover_img". Successivamente, all'interno delle parentesi, impostare il valore della proprietà di visualizzazione come "in linea"Che costringerà l'elemento ad adattarsi alla stessa linea:

.IMG: Hover .hover_img
Visualizza: in linea;

Ecco il risultato che dimostra che l'immagine viene modificata quando l'utente si libra su di essa:

L'output di cui sopra indica che abbiamo modificato correttamente l'immagine su Hover usando CSS.

Conclusione

L'immagine può essere modificata su Hover usando ": Hover"Elemento pseudo-Classe. Per fare ciò, aggiungi le immagini richieste nel file HTML, impostale nella stessa posizione usando CSS e applica il selettore. Di conseguenza, la prima immagine cambierà quando si libra su di essa. In questo articolo, abbiamo spiegato come cambiare un'immagine su Hover usando: Hover con un esempio pratico.