Sådan ændres Row farve på en mouse-over

Den "OnMouseOver" begivenhed i JavaScript effekter Web elementer ved at ændre dem, når brugeren placerer musemarkøren over den. Denne begivenhed, kombineret med "onMouseOut" begivenhed, skaber en rollover effekt, der kan bruges til at ændre stil af tekst, billeder og endda tabelceller. Hvis du vil ændre farven på en tabel række, skal du oprette en klasse for "<tr>" tag, som vil påvirke kun tabelrækken og ikke de kolonner.

Vejledning

1

Åbn en HTML editor og derefter klikke på "File" og vælg "Ny".

2

Klik for at placere musemarkøren mellem "<head>" og "</ head>" tags og tryk "Enter" for at oprette en ny linje.

3

Skriv "<style type =" text / css ">", og tryk på "Enter". Skriv ".normal {background-color: #FFFFFF}" for at oprette en klasse med en hvid baggrund. Tryk på "Enter". Skriv ".highlight {background-color: #DADADA}" (erstat "#DADADA" med hex farve værdien af ​​dit valg) til at oprette en klasse, der er fremhævet med en anden farve. Tryk på "Enter".

4

Skriv "</ style>" for at lukke stil tag.

5

Klik for at placere musemarkøren mellem "<body>" og "</ body>" tags, hvor du ønsker at placere bordet. Tryk på "ENTER" for at oprette en ny linje.

6

Skriv "<table>", og tryk på "Enter". Dette er åbningen tabel tag.

7

Skriv "<tr onmouseover =" this.className = 'highlight' "onmouseout =" this.className = "normal" "class =" normal ">" for at oprette en tabel række med de "onmouseover" og "onMouseOut" kommandoer, vil ændre rækken farve.

8

Type "<td> </ td>" for at oprette en celle i rækken, og tryk derefter på "Enter". Gentag dette trin for at skabe flere celler i tabellen række.

9

Skriv "</ tr>" for at lukke bordet række.

10

Gentag trin 7, 8 og 9 for at skabe flere tabelrækker efter behov. Skriv "</ table>" for at lukke tabellen tags.

11

Klik på menuen "Filer" og skriv "Gem". Dobbeltklik på HTML-dokumentet for at åbne det i webbrowseren.

12

Placer musemarkøren over bordet række for at ændre farven på bordet række til farven er defineret i trin 3 som "highlight" klasse. Flyt musemarkøren ud af bordet række for at ændre det tilbage til den oprindelige "normale" farve klasse.

Relaterede artikler