Gombpélda 1-es görgetéssel a CSS-ben

1. rágörgetés CSS
Ebben a példában 3 kép kell, amely így fog működni;
Nyugalom

Esetén

Vissza tartott

Akkor az oldalunk törzsében ez van
Kód:


KEZDET

Így minden gombunknál, miután CSS-t kell használnunk, ezzel a kóddal kezdjük:
Kód:

# bot1 {
határ: 0 0 0 0;
párnázás: 0;
szöveg igazítása: középre;
}
Ahol azt mondjuk, hogy nem szeretnénk külső és belső margót, ott a szöveget középre igazítjuk, most ezzel a kóddal folytatjuk:
Kód:

# bot1 - {
background-image: url (bg_menu_1.jpg);
háttér-pozíció: középső felső;
magasság: 30px;
szélesség: 100 képpont;
kijelző: blokk;
szín: # 990000;
szöveg-dekoráció: nincs;
padding-top: 5px;
háttér-ismétlés: nincs ismétlés;
betűsúly: félkövér;
}
Hogy gyakorlatilag ő az, aki mindent megcsinál, lássuk soronként
background-image: url (bg_menu_1.jpg);
Ezzel azt mondjuk, hogy szeretnénk háttérképet, és megadjuk ennek az útját
háttér-pozíció: középső felső;
Ezzel azt jelezzük, hogy a háttérkép helyzete középen és felfelé lesz.
háttér-ismétlés: nincs ismétlés;
Hogy a háttér ne ismétlődjön, mintha minta lenne.

magasság: 30px;
szélesség: 100;
Elmondjuk neki, hogy a magasság 30 és a szélesség 100 képpont lesz, ami a háttérképünk mérete.
kijelző: blokk;
Így létrehoz egy dobozt és tiszteletben tartja azokat az intézkedéseket, amelyeket korábban tettünk.
szín: # 990000
Ezzel csak színt adunk a dobozunkban lévő szövegnek.
szöveg-dekoráció: nincs;
Arra van szükség, hogy elkerüljük a linkek alatti vonalat.
padding-top: 5px;
Így megspórolok egy 5px-es helyet a linkünk felső részében, és ezzel leengedi a pozíciót a dobozunk közepére.
betűsúly: félkövér;
Félkövérré teszi a betűket
Ezután már csak osztályokat kell hozzáadnia a "hover" és a "focus" pszeudo elemekhez.
Kód:

# bot1 a: hover {
background-image: url (bg_menu_2.jpg);
}
# bot1 to: focus {
background-image: url (bg_menu_3.jpg);
}
De ahogy észrevesszük, csak a háttérképünk útvonalát változtattuk meg, hogy elérjük a kívánt hatást.
A mi kódunk rollover példa css-ben lásd lent:
Kód:








KEZDET


A képek pedig letölthetők erről az oldalról, a képre jobb klikkel és más néven elmentve.