Eksempel på knapp med rollover 1 i CSS

Rollover 1 CSS
For dette eksemplet må vi ha 3 bilder som vil fungere som;
Hvile

På

Holdt nede

Så i hoveddelen av nettstedet vårt har vi dette
Kode:


BEGYNNELSE

Og så for alle knappene våre, etter at vi må bruke CSS, starter vi med denne koden:
Kode:

# bot1 {
kantlinje: 0 0 0 0;
polstring: 0;
tekst-align: center;
}
Der vi sier at vi ikke vil ha ytre og indre marg, justerer vi teksten til midten, nå fortsetter vi med denne koden:
Kode:

# bot1 til {
bakgrunnsbilde: url (bg_menu_1.jpg);
bakgrunnsposisjon: midt øverst;
høyde: 30px;
bredde: 100px;
display: blokk;
farge: # 990000;
tekst-dekor: ingen;
polstring-topp: 5px;
bakgrunns-repeat: ingen-repeat;
font-weight: fet;
}
At det praktisk talt er han som gjør alt, la oss se linje for linje
bakgrunnsbilde: url (bg_menu_1.jpg);
Med dette sier vi at vi ønsker et bakgrunnsbilde og vi gir veien til dette
bakgrunnsposisjon: midt øverst;
Med dette indikerer vi at posisjonen til bakgrunnsbildet vil være sentrert og oppover.
bakgrunns-repeat: ingen-repeat;
Slik at bakgrunnen ikke gjentar seg som om det var et mønster.

høyde: 30px;
bredde: 100;
Vi forteller ham at høyden vil være 30 og bredden 100px som er dimensjonene til bakgrunnsbildene våre.
display: blokk;
Slik at det genererer og respekterer en boks med tiltakene som vi setter før.
farge: # 990000
Med dette gir vi kun en farge til teksten som er inne i boksen vår.
tekst-dekor: ingen;
Det er for å unngå linjen som er under lenkene.
polstring-topp: 5px;
Slik at jeg sparer en plass på 5px i den øvre delen av lenken vår og med dette senker den posisjonen til midten av boksen vår.
font-weight: fet;
Gjør bokstavene fete
Da må du bare legge til klasser for pseudoelementene "hover" og "fokus"
Kode:

# bot1 a: hover {
bakgrunnsbilde: url (bg_menu_2.jpg);
}
# bot1 til: fokus {
bakgrunnsbilde: url (bg_menu_3.jpg);
}
Men som vi innser, endret vi bare banen til bakgrunnsbildene våre for å oppnå effekten vi var ute etter.
Koden til vår rollover eksempel i css Vist under:
Kode:








BEGYNNELSE


Og bildene kan lastes ned fra denne siden, ved å høyreklikke på bildet og lagre som.