Ennek a kézikönyvnek az a célja, hogy megvizsgálja, hogyan változtathat meg egy képet lebegve CSS használatával. Szóval, kezdjük!
Mi a :hover a CSS-ben?
A :hover a pszeudoosztály egyik eleme, amely a HTML-elemek állapotának megváltoztatására szolgál, amikor az egér elindítja. Ezt a CSS-választót elsősorban az elemek stílusára vagy kiválasztására használják. Linkekre azonban nem alkalmazható.
Szintaxis
A :hover szintaxisa alább látható:
elem : lebeg {
CSS kód. . .
}
Itt, ' elem ” arra az elemre utal, amelyben alkalmazni kívánja a lebegési effektust.
Most áttérünk arra a gyakorlati példára, amikor a CSS segítségével lebegteti a képet.
Példa: Hogyan változtassunk képet a lebegtetésen CSS használatával?
Ha először az egérmutatót szeretné módosítani, adjon hozzá két képet a HTML szakaszhoz. Az első kép az aktív állapothoz, a következő pedig a lebegő állapothoz.
1. lépés: Képek hozzáadása
A megadott célból két képet adunk hozzá: ' kép1 ” és „ kép2 ”, és rendelje hozzá az osztály nevét a második képhez: „ hover_img ”.
HTML
< test >< div osztály = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' osztály = 'hover_img' >
< / div >
< / test >
2. lépés: Stílusos képek
Most lépjen a CSS-re, és állítsa be mindkét kép pozícióját a „ pozíció ' ingatlan. pozícióját a következőképpen állítjuk be: abszolút ” hogy abszolút a legközelebbi szülőjére hivatkozva helyezze el.
CSS
.img {pozíció : abszolút ;
}
Ez a következő eredményt mutatja:
A következő lépésben a második képet az első elé állítjuk. Ehhez a kép pozícióját a következőképpen állítjuk be: abszolút ', és állítsa be a felső és a bal pozíciót '' 0 ”. Ezzel a képpel az első kép elé kerül, de a második képet szeretnénk megjeleníteni, amikor az egér lebeg rajta. Tehát állítsa be a kijelzett értéket ' egyik sem ” a kívánt eredményt mutatja:
.hover_img {pozíció : abszolút ;
tetejére : 0 ;
bal : 0 ;
kijelző : egyik sem ;
}
A megadott kód kimenete a következő:
A második kép sikeresen el lett rejtve az első kép mögé.
Most lépjen a következő lépésre.
3. lépés: Kép módosítása az egérmutatón
Ezután használja a „ :lebeg ” és válassza a „ .img ” az egérmutatót a kiválasztott elemre helyezheti. Ezután rendelje hozzá a második kép osztálynevét ' .hover_img ”. Ezután a zárójelben állítsa be a megjelenítési tulajdonság értékét a következőre: Sorban ', amely arra kényszeríti az elemet, hogy ugyanabba a sorba illeszkedjen:
.img : lebeg .hover_img {kijelző : Sorban ;
}
Az alábbi eredmény azt mutatja, hogy a kép megváltozik, amikor a felhasználó rámutat:
A fent megadott kimenet azt jelzi, hogy sikeresen megváltoztattuk a képet CSS segítségével.
Következtetés
A képet lebegtetve módosíthatja a „ :lebeg ” pszeudoosztály elem. Ehhez adja hozzá a szükséges képeket a HTML-fájlhoz, állítsa őket ugyanabba a pozícióba CSS segítségével, és alkalmazza rajtuk a :hover választót. Ennek eredményeként az első kép megváltozik, ha fölé viszi az egérmutatót. Ebben a cikkben egy gyakorlati példán keresztül elmagyaráztuk, hogyan változtathat meg egy képet a :hover segítségével.