L'objectiu d'aquest manual és explorar com canviar una imatge al passar el cursor mitjançant CSS. Així doncs, comencem!
Què és :hover en CSS?
El :hover és un element de pseudo-classe utilitzat per canviar l'estat dels elements HTML quan un ratolí l'activa. Aquest selector CSS s'utilitza principalment per estilitzar o seleccionar elements. Tanmateix, no es pot aplicar als enllaços.
Sintaxi
La sintaxi de :hover es mostra a continuació:
element : flotar {
codi CSS. . .
}
Aquí, ' element ” es refereix a l'element en el qual voleu aplicar l'efecte de flotació.
Ara, passarem a l'exemple pràctic de canviar la imatge al passar el cursor mitjançant CSS.
Exemple: Com canviar la imatge al passar el cursor amb CSS?
Per canviar la imatge en passar el cursor primer, afegiu dues imatges a la secció HTML. La primera imatge és per a l'estat actiu i la següent és per a l'estat de flotació.
Pas 1: afegiu imatges
Amb el propòsit especificat, afegirem dues imatges, ' imatge 1 ' i ' imatge 2 ”, i assigneu el nom de la classe a la segona imatge com a “ hover_img ”.
HTML
< cos >< div classe = 'img' >
< img src = 'imatge1.png' >
< img src = 'imatge2.png' classe = 'hover_img' >
< / div >
< / cos >
Pas 2: Estil les imatges
Ara, aneu al CSS per establir la posició de les dues imatges amb ' posició ' propietat. Establirem la seva posició com ' absolut ” per posicionar-lo absolutament amb referència al seu pare més proper.
CSS
.img {posició : absolut ;
}
Això mostrarà el següent resultat:
En el següent pas, posarem la segona imatge davant de la primera. Per fer-ho, establirem la posició de la imatge com a ' absolut ” i establiu la posició superior i esquerra com a “ 0 ”. L'ús d'aquesta imatge es col·loca davant de la primera imatge, però volem mostrar la segona imatge quan hi passi el ratolí. Per tant, establiu el valor de visualització com a ' cap ” mostrarà el resultat desitjat:
.hover_img {posició : absolut ;
superior : 0 ;
esquerra : 0 ;
visualització : cap ;
}
La sortida del codi donat és la següent:
La segona imatge s'ha amagat correctament darrere de la primera.
Ara, passeu al següent pas.
Pas 3: canvieu la imatge al passar el cursor
A continuació, utilitzeu “ : flotar ” i seleccioneu “ .img ” per aplicar el cursor a l'element seleccionat. A continuació, assigneu el nom de classe de la segona imatge ' .hover_img ”. Després d'això, dins dels parèntesis, establiu el valor de la propietat de visualització com a ' en linia ” que obligarà l'element a encaixar en la mateixa línia:
.img : flotar .hover_img {visualització : en linia ;
}
Aquest és el resultat que demostra que la imatge es canvia quan l'usuari hi posa el cursor:
La sortida anterior indica que hem canviat correctament la imatge al passar el cursor mitjançant CSS.
Conclusió
La imatge es pot canviar al passar el cursor amb el botó ' : flotar ” element pseudo-classe. Per fer-ho, afegiu les imatges necessàries al fitxer HTML, col·loqueu-les a la mateixa posició mitjançant CSS i apliqueu-hi el selector :hover. Com a resultat, la primera imatge canviarà quan passeu el cursor per sobre d'ella. En aquest article, hem explicat com canviar una imatge en passar el ratolí mitjançant :hover amb un exemple pràctic.