nicht angemeldet
Hallo,
nun bekomme ich als Event nurnoch ein mouseover/mouseout ausgelößt vom inneren <div>.
Wie kann das sein?? Müssten nich zumindest beide <div>'s feuern?
Nein. Wenn die Maus #outer nie direkt berühren kann, sondern nur die Boxen deren Kindelemente, ist #outer auch nie Ziel eines mouseover-Events.
Ich möchte eigentlich nur wissen, wann der Mauszeiger in den äußeren <div> eindringt bzw. diesen wieder verlässt!!
Allgemein ist ein solches Menü einfacher: </archiv/2006/4/t127058/#m820234>.
Aber wenn das Elternelement versteckt ist, musst du dir eine andere Strategie ausdenken. Warum musst du Elemente mit position:absolute auch verschachteln? Wieso können die Listenelemente nicht normal im äußeren Element fließen? Wie auch immer - mit target kannst du da nicht operieren, sondern müsstest mit fromElement/toElement arbeiten:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
[code lang=javascript]function log (message) {
if (typeof log.t == "undefined")
log.t = document.getElementById("t");
log.t.value = log.t.value + message + "\n";
}
if (window.Node && Node.prototype && !Node.prototype.contains) {
Node.prototype.contains = function (arg) {
return !!(this.compareDocumentPosition(arg) & 16);
};
}
function over (event) {
event = event || window.event;
var fromElement = event.relatedTarget || event.fromElement || false;
if (!navigation.contains(fromElement)) {
log("echter mouseover");
}
}
function out (event) {
event = event || window.event;
var toElement = event.relatedTarget || event.toElement || false;
if (!navigation.contains(toElement)) {
log("echter mouseout");
}
}
window.onload = function () {
navigation = document.getElementById("menu");
navigation.onmouseover = over;
navigation.onmouseout = out;
};
</script>
<style type="text/css">
#menu { margin: 0; padding: 0; position: absolute; top: 50px; left: 600px; list-style-position: inside; }
#menu li { margin: 0; padding: 0; background-color: #c0c0c0; width: 150px; padding: 5px; }
</style>
</head><body id="body">
<ul id="menu">
<li>Menüpunkt 1</li>
<li>Menüpunkt 2</li>
<li>Menüpunkt 3</li>
<li>Menüpunkt 4</li>
<li>Menüpunkt 5</li>
<li>Menüpunkt 6</li>
</ul>
<p id="p"><textarea id="t" cols="60" rows="25"></textarea></p>
</body>
</html>[/code]
Da wird einfach darauf geachtet, dass beim direkten (!) Übergang der Maus von der Fläche eines Menüpunktes auf die Fläche eines anderen Menüpunktes kein Mouseover/Mouseout ausgelöst wird. Voraussetzung ist, dass die auch direkt aneinandergrenzen. Ob du das suchst, weiß ich nicht ganz, denn deine position-absolute-Verschachtelung wirft mir Rätsel auf.
Mathias