billede overgange er nyttige redskaber i at hjælpe dine slutbrugere spore deres mus på tværs af din webside. En hjemmeside designer vil ofte pakke en masse af detaljerede oplysninger på en side , og slutbrugeren har brug for en visuel kø , at hendes mus har rullet over something.There er to grundlæggende måder at oprette en rollover . Du kan bruge client-side scripting sprog kaldet JavaScript til at udføre opgaven , eller du kan bruge Cascading Style Sheets ( CSS) til at udføre opgaven . Denne artikel dækker Cascading Style Sheets metode. Oprettelse af tekst Rollover

Opret et generisk XHTML dokument i teksteditor som ses på billedet.

* Medtag DOCTYPE Transitional og dine kodning tags. * Medtag titel-tags mellem hovedet tags * Medtag typografi-tags mellem hovedet tags

mellem krop tags , skal du skrive følgende ord : . . .
p Dette er en tekst rollover

Vedlæg dette sætning med span begyndelsen og slutningen tags, som vist. Inde begyndelsen span tag , type : Oprettelse

class = " rollover "

Upload dit dokument til din webserver
de Stylesheet Rules
< . br >

Skriv følgende mellem de typografi-tags i toppen af ​​dit dokument : Hej

span.rollover { background- color: white ;} span : hover.rollover { background- color : gul , farve : maroon ;}
p første oprette span rollover instruktion for den stil ark. Type " span ", derefter en periode , derefter " rollover ", hvor rollover matcher klassen attribut, der blev givet til span -tag. Det hedder , at baggrunden mellem span tags er hvid, som ligner en blank baggrundsfarve til slutbrugeren .

Dernæst skaber span, plus et kolon , plus en periode , plus rollover , hvilket er klassen af spændvidden tag . Hover instruktionen betyder " Når du placerer musemarkøren over teksten i span -tag , skal du følge disse instruktioner. " Når slutbrugeren steder musen over teksten baggrunden bliver gul og teksten bliver rødbrun .
Oprettelse af en knap Rollover
p Der er en forholdsvis nem måde at skabe en pæn knap ud af teksten på din webside. Blot tilføje følgende attributter til span.rollover instruktion : Hej

background- color: navy ; kant: 5px hvid starten; font- family: Georgien , font- size: 14 pkt , farve : hvid ;
< p> Først ændre baggrundsfarven fra hvid til flåde. Dernæst tilsættes grænsen instruktion, som har tre dele: border- bredde, border-color og border - attributter . Vi har valgt en 5 -pixel , hvid starten grænse , hvilket betyder, at der er en hvid, rektangulær kasse grænser indholdet af span -tag , der er 5 pixels tyk.

Ændre skrifttype familien til Georgien på 14 pt . Endelig ændre skrifttype farve til hvid, så det viser op mod navy baggrund. Upload dokumentet til din webserver og prøve det af .
Før Rollover
p Dette er et snapshot af websiden før du placerer musemarkøren over teksten . Teksten er hvide, og baggrunden er marineblå.
Efter Rollover
p Dette er et snapshot af websiden , mens musemarkøren er over knappen . Baggrunden er gul , og teksten er rødbrun .