Problem mir einfachem Dropdown Menü
Luke
- javascript
OK hallo zusammen erstmal.
Ich hab ein kleines Problem und verstehe es einfach nicht..
Bei MouseOver über einen Link soll darunter ein Liste sichtbar werden, bei MouseOut der Liste soll diese dann wieder verschwinden.
HTML:
<div>
<a href="" onmouseover="ShowBox()>öffnen</a>
<ul id="popuplist" onmousout="HideBox()">
<li>..
</ul>
</div>
JavaScript:
function ShowBox() {
document.getElementById('popuplist').style.visibility = 'visible';
}
function HideBox() {
document.getElementById('popuplist').style.visibility = 'hidden';
}
CSS:
#popuplist {
border:solid 1px #818183;
position:absolute; left:15px;
width:284px;
visibility:hidden;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
margin:0; padding:0;
margin-top:29px;
}
#popuplist li {
background:#E7E7E8;
margin:0; padding:10px;
padding-top:3px; padding-bottom:3px;
}
So sehen die wesentlichen Sachen aus. Der MouseOver funktioniert tadellos. Das Problem ist jetzt aber, dass sobald ich mit der Maus über die Liste fahre, diese ausgeblendet wird (so als stände da onmouseover anstatt onmouseout).
Hat jemand ein Idee woran da liegen könnte?
Grüße,
li ist nicht ul
MFG
bleicher
Ähmm ok. Tut mir Leid aber ich komm nicht ganz darauf, wie mir das weiterhilft.
Grüße,
Ähmm ok. Tut mir Leid aber ich komm nicht ganz darauf, wie mir das weiterhilft.
li ist nicht ul ->
wenn der mauszeiger über li ist, ist er nicht über ul - also ist es für ul ein mouseout.
MFG
bleicher
Vielleicht überschneiden sich da Ereignisse?
Lass dir mal irgendwie ausgeben, wann die Ereignisse stattfinden.
Übrigens, da fehlt ein " nach ShowBox und mouseout könnte ein e vertragen.
Ja und klar, ul und li sind verschiedene Dinge, wie bleicher sagt. Hab ich ganz übersehen. Schande über mich ...
Ok, Sorry wegen den beiden Tippfehlern. In der eigentlichen Datei ists richtig :)
Wie kann ich mir denn die Ereignisse ausgeben lassen? Obwohl, es muss ja den Mouseout geben, sonst könnte die Liste nicht verschwinden. Ich weiß halt nur nicht warum.
Hi,
Das Problem ist jetzt aber, dass sobald ich mit der Maus über die Liste fahre, diese ausgeblendet wird (so als stände da onmouseover anstatt onmouseout).
Sobald du mit der Maus über ein Nachfahrenelement der Liste fährst, feuert auf diesem der Event mouseover - und auf der Liste selber mouseout.
mouseenter/mouseleave sind für solche Vorhaben besser geeignet - die kennen aber noch nicht alle Browser. Workarounds, um deren Prinzip auch in älteren Browsern zu implementieren, findest du sicher mit der SuMa deiner Wahl.
MfG ChrisB