Ang layunin ng manual na ito ay tuklasin kung paano baguhin ang isang imahe sa hover gamit ang CSS. Kaya, magsimula tayo!
Ano ang :hover sa CSS?
Ang :hover ay isang elemento ng pseudo-class na ginagamit upang baguhin ang estado ng mga elemento ng HTML kapag na-trigger ito ng mouse. Ang CSS selector na ito ay pangunahing ginagamit sa estilo o pagpili ng mga elemento. Gayunpaman, hindi ito mailalapat sa mga link.
Syntax
Ang syntax ng :hover ay ibinigay sa ibaba:
elemento : hover {
CSS code. . .
}
Dito,' elemento ” ay tumutukoy sa elemento kung saan mo gustong ilapat ang hover effect.
Ngayon, lilipat tayo sa praktikal na halimbawa ng pagbabago ng imahe sa hover gamit ang CSS.
Halimbawa: Paano Baguhin ang Imahe sa Hover Gamit ang CSS?
Upang palitan muna ang larawan sa hover, magdagdag ng dalawang larawan sa seksyong HTML. Ang unang larawan ay para sa aktibong estado, at ang susunod ay para sa hover na estado.
Hakbang 1: Magdagdag ng Mga Larawan
Para sa tinukoy na layunin, magdaragdag kami ng dalawang larawan, ' larawan1 'at' larawan2 ”, at italaga ang pangalan ng klase sa pangalawang larawan bilang “ hover_img ”.
HTML
< katawan >< div klase = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' klase = 'hover_img' >
< / div >
< / katawan >
Hakbang 2: Mga Imahe ng Estilo
Ngayon, lumipat sa CSS upang itakda ang posisyon ng parehong mga imahe gamit ang ' posisyon ” ari-arian. Itatakda namin ang posisyon nito bilang ' ganap ” upang iposisyon ito nang ganap na may kaugnayan sa pinakamalapit na magulang nito.
CSS
.img {posisyon : ganap ;
}
Ipapakita nito ang sumusunod na kinalabasan:
Sa susunod na hakbang, itatakda namin ang pangalawang larawan sa harap ng una. Upang gawin ito, itatakda namin ang posisyon ng imahe bilang ' ganap ” at itakda ang tuktok at kaliwang posisyon bilang “ 0 ”. Ang paggamit ng larawang ito ay inilalagay sa harap ng unang larawan, ngunit gusto naming ipakita ang pangalawang larawan kapag may mouse na nag-hover dito. Kaya, ang pagtatakda ng halaga ng display bilang ' wala ” ay magpapakita ng nais na resulta:
.hover_img {posisyon : ganap ;
itaas : 0 ;
umalis : 0 ;
display : wala ;
}
Ang output ng ibinigay na code ay ang mga sumusunod:
Ang pangalawang larawan ay matagumpay na naitago sa likod ng unang larawan.
Ngayon, lumipat sa susunod na hakbang.
Hakbang 3: Baguhin ang Larawan sa Hover
Susunod, gamitin ang ' :hover 'at piliin ang' .img ” para ilapat ang hover sa napiling elemento. Pagkatapos, italaga ang pangalan ng klase ng pangalawang larawan ' .hover_img ”. Pagkatapos nito, sa loob ng mga panaklong, itakda ang halaga ng display property bilang “ nasa linya ” na pipilitin ang elemento na magkasya sa parehong linya:
.img : hover .hover_img {display : nasa linya ;
}
Narito ang resulta na nagpapakita na ang imahe ay nabago kapag nag-hover ang user dito:
Ang ibinigay na output sa itaas ay nagpapahiwatig na matagumpay naming nabago ang imahe sa hover gamit ang CSS.
Konklusyon
Maaaring baguhin ang larawan sa hover gamit ang “ :hover ” pseudo-class na elemento. Upang gawin ito, idagdag ang mga kinakailangang larawan sa HTML file, itakda ang mga ito sa parehong posisyon gamit ang CSS, at ilapat ang :hover selector sa kanila. Bilang resulta, magbabago ang unang larawan kapag nag-hover dito. Sa artikulong ito, ipinaliwanag namin kung paano baguhin ang isang imahe sa hover gamit ang :hover na may praktikal na halimbawa.