Bilde velt er nyttige verktøy i å hjelpe dine sluttbrukere spore musen over websiden. Et nettsted designer vil ofte pakke mye detaljert informasjon på en side , og sluttbrukeren vil trenge en visuell kø at hennes mus har rullet over something.There er to grunnleggende måter å skape en velt . Du kan bruke klient -side skriptspråk som heter JavaScript for å utføre oppgaven , eller du kan bruke Cascading Style Sheets ( CSS ) til å utføre oppgaven . Denne artikkelen dekker Cascading Style Sheets metode. Opprette tekst Rollover

Lag en generisk XHTML dokument i en teksteditor som vist i bildet.

* Inkluder DOCTYPE Transitional og dine koding koder. * Inkluder tittelen kodene mellom hodet kodene * Inkluder stilmerkene mellom hodet kodene

mellom body-kodene , skriver følgende ord : . . .
p Dette er en tekst rollover

Legg ved denne setning med spenn begynnelsen og slutten tags , som vist. Inne i begynnelsen spankode , type: .

Class = " rollover "

Last opp dokumentet til webserveren
Opprette stilarksreglene

Skriv inn følgende mellom de stilmerkene øverst i dokumentet : en

span.rollover {background -color : white ;} span : hover.rollover {background -color : gul , farge : rødbrun ;}

Først oppretter spennet rollover instruksjon for stilark. Type " span ", så en periode , deretter " rollover ", der rollover matcher klassen attributt som ble gitt til spankode . Det sier at bakgrunnen mellom spankoder er hvit , noe som ser ut som en blank bakgrunnsfarge til sluttbrukeren .

Deretter skaper spenn , pluss et kolon , pluss en periode , pluss rollover , som er klassen av spankode . Hover instruksjon betyr " Når du plasserer musepekeren over teksten i spankode , følg disse instruksjonene . " Når sluttbruker steder musen over teksten , blir bakgrunnen gul og teksten blir rødbrun .
Opprette en knapp Rollover
p Det er en relativt enkel måte å lage en pen knapp ut av teksten på websiden. Bare legge til følgende attributter til span.rollover instruksjon : en

background- color: marine , kant : 5px hvitt begynnelsen , font- family: Georgia , font-size : 14 pkt , farge : hvit ;
< p> Først endre bakgrunnsfargen fra hvit til marinen. Deretter legger grensen instruksjon, som har tre deler: border- bredde , grensen farger og border- style attributter. Vi har valgt en 5 -pixel , hvit , begynnelsen grensen, noe som betyr at det er en hvit , rektangulær boks grenser innholdet i spankode som er 5 piksler tykk .

Endre skriften familien til Georgia på 14 pt . Til slutt , endre font farge til hvit , så den dukker opp mot marine bakgrunnen. Last opp dokumentet til webserveren og teste det ut .
Før Rollover
p Dette er et øyeblikksbilde av websiden før du plasserer musepekeren over teksten . Teksten er hvit , og bakgrunnen er marine.
Etter Rollover
p Dette er et øyeblikksbilde av websiden mens musepekeren er over knappen . Bakgrunnen er gul , og teksten er rødbrun .