sixfriends
20-12-2003, 19:26
Kann mir vielleicht mal jemand erklären, warum JavaScript beim Verlassen meiner Elemente nach oben kein onmouseout Event auslöst?
Bei nachfolgendem Beispiel passiert folgendes (sollte zumindest):
Beim hovern über "Link mit Untermenu" erscheint das Untermenü, dann die Maus auf das Untermenü bewegen:
1. Untermenü nach rechts oder nach unten verlassen --> Untermenü verschwindet.
2. Untermenü nach oben verlassen --> Untermenü bleibt
3. Wieder auf Untermenü gehen (von oben) und nach oben wieder verlassen --> Untermenü verschwindet.
VORSICHT: Beispiel ist nicht lauffähig auf Internet Explorer, da hab ich allerdings schon eine funktionsfähige Alternative.
<html>
<head>
<style type="text/css">
<!--
/* Style, damit die Seite sichtbar wird */
ul { margin:0px; padding:0px; list-style: none; position:absolute; top:0px; left:100%; }
li { padding:10px; margin:0px; border:1px solid #000000; position:relative; width:200px; }
ul.level0 { top:50px; left:0px; }
/* Einstellungen, durch die das Menü entsteht.*/
li ul { display:none; }
li.hover ul { display: block; }
-->
</style>
</head><body>
<ul class="level0">
<li id="0"><a href="#">Link mit Untermenu</a>
<ul class="level1">
<li>Text ohne Untermenu</li>
<li>Text ohne Untermenu</li>
<li>Text ohne Untermenu</li>
<li>Text ohne Untermenu</li>
</ul>
</li>
</ul>
<script language="JavaScript">
<!--
document.getElementById(0).onmouseover = function() { this.setAttribute("class", "hover");}
document.getElementById(0).onmouseout = function() { this.setAttribute("class", ""); }
-->
</script>
</body></html>
sixfriends
Bei nachfolgendem Beispiel passiert folgendes (sollte zumindest):
Beim hovern über "Link mit Untermenu" erscheint das Untermenü, dann die Maus auf das Untermenü bewegen:
1. Untermenü nach rechts oder nach unten verlassen --> Untermenü verschwindet.
2. Untermenü nach oben verlassen --> Untermenü bleibt
3. Wieder auf Untermenü gehen (von oben) und nach oben wieder verlassen --> Untermenü verschwindet.
VORSICHT: Beispiel ist nicht lauffähig auf Internet Explorer, da hab ich allerdings schon eine funktionsfähige Alternative.
<html>
<head>
<style type="text/css">
<!--
/* Style, damit die Seite sichtbar wird */
ul { margin:0px; padding:0px; list-style: none; position:absolute; top:0px; left:100%; }
li { padding:10px; margin:0px; border:1px solid #000000; position:relative; width:200px; }
ul.level0 { top:50px; left:0px; }
/* Einstellungen, durch die das Menü entsteht.*/
li ul { display:none; }
li.hover ul { display: block; }
-->
</style>
</head><body>
<ul class="level0">
<li id="0"><a href="#">Link mit Untermenu</a>
<ul class="level1">
<li>Text ohne Untermenu</li>
<li>Text ohne Untermenu</li>
<li>Text ohne Untermenu</li>
<li>Text ohne Untermenu</li>
</ul>
</li>
</ul>
<script language="JavaScript">
<!--
document.getElementById(0).onmouseover = function() { this.setAttribute("class", "hover");}
document.getElementById(0).onmouseout = function() { this.setAttribute("class", ""); }
-->
</script>
</body></html>
sixfriends