Obiectivul acestui manual este de a explora cum să schimbați o imagine la trecerea cu mouse-ul folosind CSS. Deci, să începem!
Ce este :hover în CSS?
:hover este un element de pseudo-clasă folosit pentru a schimba starea elementelor HTML atunci când un mouse îl declanșează. Acest selector CSS este utilizat în principal pentru a stila sau selecta elemente. Cu toate acestea, nu poate fi aplicat link-urilor.
Sintaxă
Sintaxa lui :hover este dată mai jos:
element : planare {
Cod CSS. . .
}
Aici, ' element ” se referă la elementul în care doriți să aplicați efectul de hover.
Acum, vom trece la exemplul practic de schimbare a imaginii la hover folosind CSS.
Exemplu: Cum se schimbă imaginea la trecerea cursorului folosind CSS?
Pentru a schimba mai întâi imaginea la trecerea cursorului, adăugați două imagini în secțiunea HTML. Prima imagine este pentru starea activă, iar următoarea este pentru starea hover.
Pasul 1: Adăugați imagini
În scopul specificat, vom adăuga două imagini, „ imagine1 ' și ' imaginea 2 ”, și atribuiți numele clasei celei de-a doua imagini ca „ hover_img ”.
HTML
< corp >< div clasă = 'img' >
< img src = „imagine1.png” >
< img src = „imagine2.png” clasă = „hover_img” >
< / div >
< / corp >
Pasul 2: Stilați imaginile
Acum, treceți la CSS pentru a seta poziția ambelor imagini folosind „ poziţie ” proprietate. Îi vom stabili poziția ca „ absolut ” pentru a-l poziționa absolut cu referire la cel mai apropiat părinte al său.
CSS
.img {poziţie : absolut ;
}
Aceasta va arăta următorul rezultat:
În pasul următor, vom pune a doua imagine în fața primei. Pentru a face acest lucru, vom seta poziția imaginii ca „ absolut ” și setați poziția de sus și din stânga ca „ 0 ”. Folosirea acestei imagini este plasată în fața primei imagini, dar dorim să afișăm a doua imagine când trece mouse-ul pe ea. Deci, setați valoarea de afișare ca „ nici unul ” va afișa rezultatul dorit:
.hover_img {poziţie : absolut ;
top : 0 ;
stânga : 0 ;
afişa : nici unul ;
}
Ieșirea codului dat este după cum urmează:
A doua imagine este ascunsă cu succes în spatele primei imagini.
Acum, treceți la pasul următor.
Pasul 3: Schimbați imaginea la Hover
Apoi, utilizați „ :planare ” și selectați „ .img ” pentru a aplica cursorul la elementul selectat. Apoi, atribuiți numele clasei celei de-a doua imagini „ .hover_img ”. După aceea, în paranteze, setați valoarea proprietății de afișare ca „ in linie ” care va forța elementul să se potrivească în aceeași linie:
.img : planare .hover_img {afişa : in linie ;
}
Iată rezultatul care demonstrează că imaginea este schimbată atunci când utilizatorul trece cu mouse-ul pe ea:
Rezultatul de mai sus indică faptul că am schimbat cu succes imaginea la trecerea cu mouse-ul folosind CSS.
Concluzie
Imaginea poate fi schimbată la trecerea cursorului folosind butonul „ :planare ” element pseudo-clasă. Pentru a face acest lucru, adăugați imaginile necesare în fișierul HTML, setați-le în aceeași poziție folosind CSS și aplicați selectorul :hover pe ele. Ca rezultat, prima imagine se va schimba când treceți cursorul peste ea. În acest articol, am explicat cum să schimbați o imagine la hover folosind :hover cu un exemplu practic.