Selle juhendi eesmärk on uurida, kuidas muuta pilti hõljutades CSS-i abil. Niisiis, alustame!
Mis on :hover CSS-is?
:hover on pseudoklassi element, mida kasutatakse HTML-i elementide oleku muutmiseks, kui hiir selle käivitab. Seda CSS-i valijat kasutatakse peamiselt elementide stiilimiseks või valimiseks. Seda ei saa aga linkidele rakendada.
Süntaks
Sõnumi :hover süntaks on toodud allpool:
element : hõljuma {
CSS-kood. . .
}
Siin, ' element ” viitab elemendile, milles soovite hõljutusefekti rakendada.
Nüüd liigume praktilise näite juurde, kuidas CSS-i abil hõljutades pilti muuta.
Näide: kuidas muuta pilti hõljutusrežiimis CSS-i abil?
Esmalt hõljutatava pildi muutmiseks lisage HTML-i jaotisesse kaks pilti. Esimene pilt on aktiivse oleku jaoks ja järgmine on hõljumise oleku jaoks.
1. samm: lisage pilte
Määratud eesmärgil lisame kaks pilti, ' pilt1 ” ja „ pilt2 ' ja määrake teisele pildile klassi nimi kui ' hover_img ”.
HTML
< keha >< div klass = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' klass = 'hover_img' >
< / div >
< / keha >
2. samm: kujundage kujutised
Nüüd liikuge CSS-i, et määrata mõlema pildi asukoht, kasutades ' positsiooni ” vara. Seame selle positsiooni järgmiselt absoluutne ”, et positsioneerida see absoluutselt lähima vanemaga.
CSS
.img {positsiooni : absoluutne ;
}
See näitab järgmist tulemust:
Järgmises etapis seame teise pildi esimese ette. Selleks määrame pildi asukohaks ' absoluutne ' ja seadke ülemine ja vasakpoolne asend kui ' 0 ”. Selle pildi kasutamine asetatakse esimese pildi ette, kuid me tahame kuvada teist pilti, kui hiir sellel hõljub. Niisiis, määrake kuvatav väärtus järgmiselt mitte ühtegi ” näitab soovitud tulemust:
.hover_img {positsiooni : absoluutne ;
üleval : 0 ;
vasakule : 0 ;
kuva : mitte ühtegi ;
}
Antud koodi väljund on järgmine:
Teine pilt on edukalt peidetud esimese pildi taha.
Nüüd liikuge järgmise sammu juurde.
3. samm: muutke pilti hõljutil
Järgmisena kasutage ' :hõljuma ” ja valige „ .img ”, et rakendada kursorit valitud elemendile. Seejärel määrake teise pildi klassi nimi ' .hover_img ”. Pärast seda määrake sulgudes kuvatava atribuudi väärtuseks ' järjekorras ', mis sunnib elemendi samale reale mahtuma:
.img : hõljuma .hover_img {kuva : järjekorras ;
}
Siin on tulemus, mis näitab, et pilt muutub, kui kasutaja sellele kursorit hõljub:
Ülaltoodud väljund näitab, et oleme CSS-i abil hõljutades pilti edukalt muutnud.
Järeldus
Pilti saab hõljutades muuta, kasutades ' :hõljuma ” pseudoklassi element. Selleks lisage HTML-faili vajalikud pildid, määrake need CSS-i abil samale kohale ja rakendage neile valija :hover. Selle tulemusena muutub esimene pilt, kui hõljutage kursorit selle kohal. Selles artiklis oleme praktilise näitega selgitanud, kuidas muuta pilti hõljutamisel :hover abil.