Cieľom tejto príručky je preskúmať, ako zmeniť obrázok pri umiestnení kurzora myši pomocou CSS. Takže, začnime!
Čo je to :hover v CSS?
:hover je prvok pseudotriedy, ktorý sa používa na zmenu stavu prvkov HTML, keď ho spustí myš. Tento selektor CSS sa primárne používa na štýl alebo výber prvkov. Nemožno ho však použiť na odkazy.
Syntax
Syntax :hover je uvedená nižšie:
prvok : vznášať sa {
CSS kód. . .
}
Tu, ' prvok “ označuje prvok, v ktorom chcete použiť efekt vznášania.
Teraz prejdeme k praktickému príkladu zmeny obrázka pri umiestnení kurzora myši pomocou CSS.
Príklad: Ako zmeniť obrázok pri umiestnení kurzora myši pomocou CSS?
Ak chcete najprv zmeniť obrázok pri umiestnení kurzora myši, pridajte dva obrázky do sekcie HTML. Prvý obrázok je pre aktívny stav a ďalší je pre stav vznášania.
Krok 1: Pridajte obrázky
Na zadaný účel pridáme dva obrázky, “ obrázok1 “ a „ obrázok2 “ a priraďte názov triedy k druhému obrázku ako „ hover_img “.
HTML
< telo >< div trieda = 'img' >
< img src = 'image1.png' >
< img src = 'image2.png' trieda = 'hover_img' >
< / div >
< / telo >
Krok 2: Štýl obrázkov
Teraz prejdite do CSS a nastavte polohu oboch obrázkov pomocou „ pozíciu ' nehnuteľnosť. Nastavíme jej polohu ako „ absolútne “, aby ste ho umiestnili absolútne s odkazom na jeho najbližšieho rodiča.
CSS
.img {pozíciu : absolútne ;
}
To ukáže nasledujúci výsledok:
V ďalšom kroku nastavíme druhý obrázok pred prvý. Za týmto účelom nastavíme polohu obrázka ako „ absolútne “ a nastavte hornú a ľavú polohu ako „ 0 “. Pomocou tohto obrázka sa umiestni pred prvý obrázok, ale druhý obrázok chceme zobraziť, keď naň prejdete myšou. Takže nastavenie zobrazovanej hodnoty ako „ žiadny “ zobrazí požadovaný výsledok:
.hover_img {pozíciu : absolútne ;
top : 0 ;
vľavo : 0 ;
displej : žiadny ;
}
Výstup daného kódu je nasledovný:
Druhý obrázok je úspešne skrytý za prvým obrázkom.
Teraz prejdite na ďalší krok.
Krok 3: Zmeňte obrázok pri umiestnení kurzora myši
Ďalej použite „ :vznášať sa “ a zvoľte „ .img ” aplikujte kurzor myši na vybraný prvok. Potom priraďte názov triedy k druhému obrázku “ .hover_img “. Potom v zátvorkách nastavte hodnotu vlastnosti display ako „ v rade ” čo prinúti prvok, aby sa zmestil do rovnakého riadku:
.img : vznášať sa .hover_img {displej : v rade ;
}
Tu je výsledok, ktorý ukazuje, že sa obrázok zmení, keď naň používateľ umiestni kurzor myši:
Vyššie uvedený výstup naznačuje, že sme úspešne zmenili obrázok pri umiestnení kurzora myši pomocou CSS.
Záver
Obrázok je možné zmeniť pri umiestnení kurzora myši pomocou „ :vznášať sa prvok pseudotriedy. Ak to chcete urobiť, pridajte požadované obrázky do súboru HTML, nastavte ich na rovnakú pozíciu pomocou CSS a aplikujte na ne selektor :hover. V dôsledku toho sa prvý obrázok zmení, keď naň umiestnite kurzor myši. V tomto článku sme na praktickom príklade vysvetlili, ako zmeniť obrázok pri prechode myšou pomocou :hover.