Knopvoorbeeld met rollover 1 in CSS

Rollover 1 CSS
Voor dit voorbeeld moeten we 3 afbeeldingen hebben die zullen werken als;
Rust

Aan

Omlaag gehouden worden

Dan hebben we dit in de body van onze site
Code:


BEGIN

En dus voor al onze knoppen, nadat we CSS gaan gebruiken, beginnen we met deze code:
Code:

# bot1 {
grens: 0 0 0 0;
opvulling: 0;
tekst uitlijnen: midden;
}
Waar we zeggen dat we geen buitenste en binnenste marge willen, lijnen we de tekst uit naar het midden, nu gaan we verder met deze code:
Code:

# bot1 naar {
achtergrondafbeelding: url (bg_menu_1.jpg);
achtergrondpositie: midden boven;
hoogte: 30px;
breedte: 100px;
weergave: blok;
kleur: # 990000;
tekstdecoratie: geen;
opvulling-top: 5px;
achtergrondherhaling: geen herhaling;
lettergewicht: vet;
}
Dat hij praktisch degene is die alles doet, laten we regel voor regel eens kijken
achtergrondafbeelding: url (bg_menu_1.jpg);
Hiermee zeggen we dat we een achtergrondafbeelding willen en we geven het pad hiervan
achtergrondpositie: midden boven;
Hiermee geven we aan dat de positie van de achtergrondafbeelding gecentreerd en naar boven zal zijn.

achtergrondherhaling: geen herhaling;
Zodat de achtergrond zich niet herhaalt alsof het een patroon is.
hoogte: 30px;
breedte: 100;
We vertellen je dat de hoogte 30 en breedte 100px zal zijn, wat de afmetingen zijn van onze achtergrondafbeeldingen.
weergave: blok;
Zodat het een doos genereert en respecteert met de maatregelen die we eerder hebben gesteld.
kleur: # 990000
Hiermee geven we alleen een kleur aan de tekst die in onze box staat.
tekstdecoratie: geen;
Het is om de regel onder de links te vermijden.
opvulling-top: 5px;
Zodat ik een ruimte van 5px in het bovenste deel van onze link opsla en hiermee de positie naar het midden van onze box verlaagt.
lettergewicht: vet;
Maakt de letters vet
Dan hoef je alleen maar klassen toe te voegen voor de pseudo-elementen "hover" en "focus"
Code:

# bot1 a: zweef {
achtergrondafbeelding: url (bg_menu_2.jpg);
}
# bot1 naar: focus {
achtergrondafbeelding: url (bg_menu_3.jpg);
}
Maar zoals we ons realiseren, hebben we alleen het pad van onze achtergrondafbeeldingen veranderd om het effect te bereiken waarnaar we op zoek waren.
De code van onze rollover voorbeeld in css hieronder weergegeven:
Code:








BEGIN


En de afbeeldingen kunnen van deze pagina worden gedownload door met de rechtermuisknop op de afbeelding te klikken en op te slaan als.