Mouseover/mouseout problematik

[droom]

Hallo Folks,

ich habe zwei divs:
<div id="d2" style="display:none;">
<div id="d1" style="display:block;">

Wenn ich mit der Maus auf #d1 bin, soll sich #d2 öffnen. Wenn ich mit der Maus nun nicht mehr auf #d1 bin, soll #d2 wieder verschwinden, es sei denn ich bin mit der Maus auf #d2 rübergegangen. Beide divs sind direkt übereinander.

Ich habe es hingekriegt #d2 zu öffnen und schliessen abhängig davon ob ich auf #d1 bin aber wie kriege ich es dass #d2 verschwindet nur wenn ich nicht drauf gegangen bin.

Mein versuch sieht bisher so aus:
<div id="d2" style="display:none;">
<div id="d1" style="display:block;" onMouseOver="wechsle('d2')" onMouseOut="wechsle('d2')">

function wechsle(element){
var el = document.getElementById(element).style.display;
if( el == "none" ) { document.getElementById(element).style.display = "block";
} else {
document.getElementById(element).style.display = "none";
}
}

vielen Dank im Voraus.

[Guzzman]

Hallo Folks,

... es sei denn ich bin mit der Maus auf #d2 rübergegangen...

Weil du es #d2 noch nicht gesagt hast. Deine bisherigen Überlegungen basieren nur auf #d1.

[droom]

konstruktive Antworte wären erwünscht. Natürlich weiß ich, dass ich etwas in #d2 schreiben soll. Ich suche nur was.

[Guzzman]

konstruktive Antworte wären erwünscht. Natürlich weiß ich, dass ich etwas in #d2 schreiben soll. Ich suche nur was.

Ich dachte das wäre anregend genug SCNR.

ok. Du hast deine Eventhandler nur auf dem div #d1 gesetzt, sobald du mit der Maus auf #d2 bist tritt kein Eventhandler mehr ein. D.h. sobald du in #d2 bist, musst du die Display-Eigenschaft auch entsprechend setzen.

Wie man (abgesehen von der Schreibweise) Eventhandler setzt und welche Eigenschaft du setzen musst, weisst du doch schon, musst es nur noch in dem Div auch tun.

Gruß

[droom]

Richtig Guzzman. Das habe ich ja auch versucht aber #d2 verschwindet bevor ich mit der Maus drauf bin (da ich nicht mehr auf #d1 bin). Habe #d1 dann als ebene auf #d2 gelegt aber #d2 verschwindet immer noch

[ChrisB]

Hi,

Das habe ich ja auch versucht aber #d2 verschwindet bevor ich mit der Maus drauf bin (da ich nicht mehr auf #d1 bin).

Genauer: Weil auf #d1 mouseout feuert.

Habe #d1 dann als ebene auf #d2 gelegt aber #d2 verschwindet immer noch

Natürlich, weil mouseout auch immer noch feuert. Und daran wirst du auch nichts ändern können.

Die schon mehrfach diskutierte Lösung: Abfragen, was das Ziel des mouseout-Events ist, und ob es Nachfahre von #d1 ist oder nicht – und entsprechend darauf reagieren.

Stichworte: event.target, Element.contains

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, droom!

<div id="d1" style="display:block;" onMouseOver="wechsle('d2')" onMouseOut="wechsle('d2')">

Mich wundert, dass überhaupt etwas passiert, da die Event-Handler 'onmouseover' und 'onmouseout' heißen.

Matthias

[Der Martin]

Hallo,

<div id="d1" style="display:block;" onMouseOver="wechsle('d2')" onMouseOut="wechsle('d2')">

Mich wundert, dass überhaupt etwas passiert, da die Event-Handler 'onmouseover' und 'onmouseout' heißen.

ja, das ist mir auch schon unangenehm aufgefallen, ebenso wie die maskierten Anführungszeichen.
Aber HTML ist gnädig bezüglich der Groß- und Kleinschreibung. Die real existierenden Browser erst recht.

Ciao,
 Martin

[MudGuard]

Hi,

<div id="d1" style="display:block;" onMouseOver="wechsle('d2')" onMouseOut="wechsle('d2')">

An welchem Teil der Schnipselchen erkennst Du, daß XHTML verwendet wird? HTML ist case-insensitive, was die Schreibweise der Element- und Attribut-Namen betrifft.

cu,
Andreas