L'obiettivo di questo manuale è esplorare come modificare un'immagine al passaggio del mouse utilizzando CSS. Quindi, iniziamo!
Che cos'è :hover in CSS?
:hover è un elemento di pseudo-classe utilizzato per modificare lo stato degli elementi HTML quando viene attivato dal mouse. Questo selettore CSS viene utilizzato principalmente per definire lo stile o selezionare gli elementi. Tuttavia, non può essere applicato ai collegamenti.
Sintassi
La sintassi di :hover è riportata di seguito:
elemento : librarsi {
codice CSS. . .
}
Qui, ' elemento ” si riferisce all'elemento in cui si desidera applicare l'effetto al passaggio del mouse.
Passiamo ora all'esempio pratico di modifica dell'immagine al passaggio del mouse utilizzando CSS.
Esempio: come modificare l'immagine al passaggio del mouse utilizzando CSS?
Per modificare prima l'immagine al passaggio del mouse, aggiungi due immagini nella sezione HTML. La prima immagine è per lo stato attivo e la successiva è per lo stato al passaggio del mouse.
Passaggio 1: aggiungi immagini
Per lo scopo specificato, aggiungeremo due immagini, ' immagine1 ' e ' immagine2 ', e assegna il nome della classe alla seconda immagine come ' hover_img ”.
HTML
< corpo >< div classe = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' classe = 'hover_img' >
< / div >
< / corpo >
Passaggio 2: immagini di stile
Ora, passa al CSS per impostare la posizione di entrambe le immagini usando ' posizione ' proprietà. Imposteremo la sua posizione come ' assoluto ” per posizionarlo in modo assoluto rispetto al suo genitore più prossimo.
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 impostare la posizione superiore e sinistra come “ 0 ”. L'uso di questa immagine è posizionato davanti alla prima immagine, ma vogliamo visualizzare la seconda immagine quando ci passi sopra il mouse. Quindi, impostando il valore visualizzato come ' nessuno ” mostrerà il risultato desiderato:
.hover_img {posizione : assoluto ;
superiore : 0 ;
sinistra : 0 ;
Schermo : nessuno ;
}
L'output del codice fornito è il seguente:
La seconda immagine è nascosta con successo dietro la prima immagine.
Ora, vai al passaggio successivo.
Passaggio 3: cambia immagine al passaggio del mouse
Quindi, usa ' : passa il mouse ” e seleziona “ .img ” per applicare il passaggio del mouse all'elemento selezionato. Quindi, assegna il nome della classe della seconda immagine ' .hover_img ”. Dopodiché, tra parentesi, imposta il valore della proprietà display come ' in linea ” che forzerà l'elemento a rientrare nella stessa riga:
.img : librarsi .hover_img {Schermo : in linea ;
}
Ecco il risultato che dimostra che l'immagine viene modificata quando l'utente passa il mouse su di essa:
L'output sopra indicato indica che abbiamo modificato con successo l'immagine al passaggio del mouse utilizzando CSS.
Conclusione
L'immagine può essere modificata al passaggio del mouse utilizzando il pulsante ' : passa il mouse ” elemento di pseudo-classe. Per fare ciò, aggiungi le immagini richieste nel file HTML, impostale nella stessa posizione utilizzando CSS e applica il selettore :hover su di esse. Di conseguenza, la prima immagine cambierà quando ci passi sopra. In questo articolo, abbiamo spiegato come modificare un'immagine al passaggio del mouse utilizzando :hover con un esempio pratico.