Cilj ovog priručnika je istražiti kako promijeniti sliku dok lebdite pomoću CSS-a. Dakle, počnimo!
Što je :hover u CSS-u?
:hover je element pseudoklase koji se koristi za promjenu stanja HTML elemenata kada ga miš aktivira. Ovaj CSS selektor prvenstveno se koristi za stiliziranje ili odabir elemenata. Međutim, ne može se primijeniti na poveznice.
Sintaksa
Sintaksa :hover data je u nastavku:
element : lebdjeti {
CSS kod. . .
}
Ovdje, ' element ” odnosi se na element na koji želite primijeniti efekt lebdenja.
Sada ćemo prijeći na praktični primjer mijenjanja slike pri lebdenju pomoću CSS-a.
Primjer: Kako promijeniti sliku pri lebdenju pomoću CSS-a?
Da biste prvo promijenili sliku pri prelasku, dodajte dvije slike u HTML odjeljak. Prva slika je za aktivno stanje, a sljedeća je za lebdeće stanje.
Korak 1: Dodajte slike
Za navedenu svrhu dodat ćemo dvije slike, “ slika1 ' i ' slika2 ', a drugoj slici dodijelite naziv klase kao ' hover_img ”.
HTML
< tijelo >< div razreda = 'img' >
< img src = 'slika1.png' >
< img src = 'slika2.png' razreda = 'hover_img' >
< / div >
< / tijelo >
Korak 2: Stilske slike
Sada prijeđite na CSS da biste postavili položaj obiju slika koristeći ' položaj ” vlasništvo. Njegov položaj postavit ćemo kao ' apsolutni ” pozicionirati ga apsolutno u odnosu na njegovog najbližeg roditelja.
CSS
.img {položaj : apsolutni ;
}
To će pokazati sljedeći ishod:
U sljedećem koraku postavit ćemo drugu sliku ispred prve. Da bismo to učinili, postavit ćemo položaj slike kao ' apsolutni ' i postavite gornji i lijevi položaj kao ' 0 ”. Korištenje ove slike postavlja se ispred prve slike, ali želimo prikazati drugu sliku kada mišem prijeđemo na nju. Dakle, postavljanje vrijednosti prikaza kao ' nikakav ” će pokazati željeni rezultat:
.hover_img {položaj : apsolutni ;
vrh : 0 ;
lijevo : 0 ;
prikaz : nikakav ;
}
Izlaz zadanog koda je sljedeći:
Druga slika je uspješno skrivena iza prve slike.
Sada prijeđite na sljedeći korak.
Korak 3: promijenite sliku dok lebdite
Zatim upotrijebite ' :lebdjeti ” i odaberite „ .img ” za primjenu lebdenja na odabrani element. Zatim dodijelite ime klase drugoj slici ' .hover_img ”. Nakon toga, unutar zagrada, postavite vrijednost svojstva prikaza kao ' u redu ” koji će prisiliti element da stane u isti redak:
.img : lebdjeti .hover_img {prikaz : u redu ;
}
Ovo je rezultat koji pokazuje da se slika mijenja kada korisnik prijeđe pokazivačem na nju:
Gornji izlaz pokazuje da smo uspješno promijenili sliku pri lebdenju koristeći CSS.
Zaključak
Slika se može promijeniti prelaskom pokazivača pomoću ' :lebdjeti ” element pseudoklase. Da biste to učinili, dodajte potrebne slike u HTML datoteku, postavite ih na isti položaj pomoću CSS-a i na njih primijenite selektor :hover. Kao rezultat toga, prva slika će se promijeniti kada prijeđete iznad nje. U ovom smo članku na praktičnom primjeru objasnili kako promijeniti sliku pri lebdenju koristeći :hover.