Šio vadovo tikslas yra ištirti, kaip pakeisti vaizdą užvedus pelės žymeklį naudojant CSS. Taigi, pradėkime!
Kas yra :hover CSS?
:hover yra pseudoklasės elementas, naudojamas pakeisti HTML elementų būseną, kai jį suaktyvina pelė. Šis CSS parinkiklis pirmiausia naudojamas elementams stiliuoti arba pasirinkti. Tačiau jis negali būti taikomas nuorodoms.
Sintaksė
:hover sintaksė pateikta žemiau:
elementas : užveskite pelės žymeklį {
CSS kodas. . .
}
Čia, ' elementas “ nurodo elementą, kuriame norite taikyti užvedimo efektą.
Dabar pereisime prie praktinio pavyzdžio, kaip pakeisti vaizdą užvedus pelės žymeklį naudojant CSS.
Pavyzdys: Kaip pakeisti vaizdą ant pelės žymeklio naudojant CSS?
Norėdami pakeisti vaizdą užvedus pelės žymeklį, HTML skiltyje pridėkite du vaizdus. Pirmas vaizdas skirtas aktyviajai būsenai, o kitas – užvedimo būsenai.
1 veiksmas: pridėkite vaizdus
Nurodytam tikslui pridėsime du vaizdus „ vaizdas1 “ ir „ vaizdas2 “ ir antrajam vaizdui priskirkite klasės pavadinimą kaip „ hover_img “.
HTML
< kūnas >< div klasė = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' klasė = 'hover_img' >
< / div >
< / kūnas >
2 veiksmas: sukurkite vaizdų stilių
Dabar pereikite prie CSS, kad nustatytumėte abiejų vaizdų padėtį naudodami „ padėtis ' nuosavybė. Mes nustatysime jos poziciją kaip „ absoliutus “, kad jis būtų absoliučiai remdamasis artimiausiu tėvu.
CSS
.img {padėtis : absoliutus ;
}
Tai parodys tokį rezultatą:
Kitame žingsnyje antrą vaizdą nustatysime prieš pirmąjį. Norėdami tai padaryti, nustatysime vaizdo padėtį kaip „ absoliutus “ ir nustatykite viršutinę ir kairę padėtį kaip „ 0 “. Naudojant šį vaizdą, jis dedamas prieš pirmąjį vaizdą, bet norime rodyti antrą vaizdą, kai ant jo užves pelė. Taigi, nustatykite rodymo reikšmę kaip „ nė vienas “ parodys norimą rezultatą:
.hover_img {padėtis : absoliutus ;
viršuje : 0 ;
paliko : 0 ;
ekranas : nė vienas ;
}
Pateikto kodo išvestis yra tokia:
Antrasis vaizdas sėkmingai paslėptas už pirmojo vaizdo.
Dabar pereikite prie kito žingsnio.
3 veiksmas: pakeiskite vaizdą ant pelės žymeklio
Tada naudokite „ :užveskite pelės žymeklį “ ir pasirinkite „ .img “, kad užvestumėte žymeklį ant pasirinkto elemento. Tada priskirkite antrojo vaizdo klasės pavadinimą ' .hover_img “. Po to skliausteliuose nustatykite rodymo ypatybės reikšmę kaip „ eilutę “, kuris privers elementą tilpti toje pačioje eilutėje:
.img : užveskite pelės žymeklį .hover_img {ekranas : eilutę ;
}
Štai rezultatas, parodantis, kad vaizdas pasikeičia, kai vartotojas ant jo užveda pelės žymeklį:
Aukščiau pateikta išvestis rodo, kad sėkmingai pakeitėme vaizdą užvedus pelės žymeklį naudodami CSS.
Išvada
Vaizdą galima pakeisti užvedus pelės žymeklį naudojant „ :užveskite pelės žymeklį ” pseudoklasės elementas. Norėdami tai padaryti, pridėkite reikiamus vaizdus į HTML failą, nustatykite juos toje pačioje pozicijoje naudodami CSS ir pritaikykite jiems parinkiklį :hover. Dėl to pirmasis vaizdas pasikeis užvedus pelės žymeklį virš jo. Šiame straipsnyje mes paaiškinome, kaip pakeisti vaizdą užvedus pelės žymeklį naudojant :hover su praktiniu pavyzdžiu.