IntroductionIn HTML en lagdelt element kan oprettes med en CSS absolutte position ejendom og en høj z-indeksværdi. En situation, hvor en sådan lagdelt element er fundet på websider er med en menu sæt. En menu sæt vises altid at dække elementer bag det. Forestil dig, at en sådan lagdelt element er en tabel element med varer (hyperlinks) i sine tabelceller. Antag, at bordet har en unmouseout begivenhed. Dit håb kan være, at når musemarkøren går ud af bordet, vil unmouseout begivenhed udløses kalde en klient script funktion, der vil fjerne tabellen (menuen sæt) fra skærmen.
I praksis er dette ikke opnås, fordi som musemarkøren bevæger sig inden tabellen fra et element til et andet inde i tabellen, er det onMouseOut begivenhed udløses. Den onMouseOut begivenhed er ikke kun udløses, når musemarkøren bevæger sig helt ud af lagdelte (tabel) element; det trigerred som den bevæger sig fra et element til et andet inde i Table.In denne artikel vil jeg vise dig, hvordan du bruger onmouseover og onMouseOut arrangementer at simulere onMouseOut begivenhed for laget elementet og løse problemet.
Du har brug for grundlæggende viden i HTML, CSS og JavaScript til at forstå denne artikel. Jeg udført mine eksperimenter med browsere, Internet Explorer 6, Mozilla Firefox 2, Netscape 8, Opera 9 og Safari 3.BEMÆRK: Hvis du ikke kan se koden, eller hvis du tror noget mangler i denne artikel (brudt link, billede fraværende ), bare kontakte mig på [email protected]. Det vil sige, kontakt mig for det mindste problem, du har om, hvad du er reading.Demonstration af ProblemIn følgende kode, har du en DIV element. Denne DIV element har en tabel element.
Tabellen element har en værdi af absolut for sin holdning ejendom. Det har en z-indeksværdi på 20. Så det dækker elementerne i den normale CSS flow. Bordet har en onMouseOut begivenhed, som skulle vise 'Mus Out', når musemarkøren går ud af bordet. Tabellen har tre rækker. Hver række har en celle. Hver celle har tre hyperlinks. Prøv koden (gem den og åbne den i en browser). "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.
dtd">
hyperlink 0