Tämän oppaan tavoitteena on tutkia, miten voit vaihtaa kuvaa hiirellä CSS:n avulla. Joten, aloitetaan!
Mikä on :hover CSS:ssä?
:hover on pseudoluokan elementti, jota käytetään muuttamaan HTML-elementtien tilaa, kun hiiri laukaisee sen. Tätä CSS-valitsinta käytetään ensisijaisesti elementtien tyyliin tai valitsemiseen. Sitä ei kuitenkaan voi soveltaa linkkeihin.
Syntaksi
Sanan :hover syntaksi on annettu alla:
elementti : leijuu {
CSS-koodi. . .
}
Täällä, ' elementti ” viittaa elementtiin, jossa haluat käyttää hover-tehostetta.
Nyt siirrymme käytännön esimerkkiin kuvan vaihtamisesta hiirellä CSS:n avulla.
Esimerkki: Kuinka vaihtaa kuvaa Hoverissa CSS:n avulla?
Jos haluat vaihtaa ensin hiiren päällä olevan kuvan, lisää kaksi kuvaa HTML-osioon. Ensimmäinen kuva on aktiivista tilaa ja seuraava on leijuntatilaa varten.
Vaihe 1: Lisää kuvia
Määritettyä tarkoitusta varten lisäämme kaksi kuvaa, ' kuva1 ' ja ' kuva2 ja määritä luokan nimi toiselle kuvalle nimellä ' hover_img ”.
HTML
< kehon >< div luokkaa = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' luokkaa = 'hover_img' >
< / div >
< / kehon >
Vaihe 2: Tyylikuvat
Siirry nyt CSS:ään asettaaksesi molempien kuvien sijainti käyttämällä ' asema ” omaisuutta. Asetamme sen asemaksi ' ehdoton ” sijoittaa sen ehdottomasti lähimpään vanhempaansa nähden.
CSS
.img {asema : ehdoton ;
}
Tämä näyttää seuraavan tuloksen:
Seuraavassa vaiheessa asetamme toisen kuvan ensimmäisen eteen. Tätä varten asetamme kuvan sijainniksi ' ehdoton ' ja aseta ylä- ja vasen asento ' 0 ”. Käyttämällä tätä kuvaa sijoitetaan ensimmäisen kuvan eteen, mutta haluamme näyttää toisen kuvan, kun hiiri on sen päällä. Joten aseta näytön arvoksi ' ei mitään ” näyttää halutun tuloksen:
.hover_img {asema : ehdoton ;
alkuun : 0 ;
vasemmalle : 0 ;
näyttö : ei mitään ;
}
Annetun koodin tulos on seuraava:
Toinen kuva on onnistuneesti piilotettu ensimmäisen kuvan taakse.
Siirry nyt seuraavaan vaiheeseen.
Vaihe 3: Vaihda kuva Hoverissa
Käytä seuraavaksi ' :hover ' ja valitse ' .img ” siirtääksesi osoittimen valittuun elementtiin. Anna sitten toisen kuvan luokan nimi ' .hover_img ”. Aseta sen jälkeen suluissa näyttöominaisuuden arvoksi ' linjassa ', joka pakottaa elementin sovittamaan samalle riville:
.img : leijuu .hover_img {näyttö : linjassa ;
}
Tässä on tulos, joka osoittaa, että kuva muuttuu, kun käyttäjä vie hiiren sen päälle:
Yllä annettu tulos osoittaa, että olemme onnistuneesti vaihtaneet kuvan hoverissa CSS:n avulla.
Johtopäätös
Kuvaa voi vaihtaa hiiren päällä käyttämällä ' :hover ” pseudoluokan elementti. Lisää tarvittavat kuvat HTML-tiedostoon, aseta ne samaan paikkaan CSS:n avulla ja käytä :hover-valitsinta niihin. Tämän seurauksena ensimmäinen kuva muuttuu, kun vie hiiri sen päälle. Tässä artikkelissa olemme selittäneet, kuinka kuvaa vaihdetaan :hover-toiminnolla käytännöllisen esimerkin avulla.