Fehlfunktion beim Ein- und Ausblenden

[minicrispie]

Hallo,

»» Dazu nutze ich mouseover und mouseout. In dem Contentbereich eines Divs habe ich logischerweise Buttons und Textfelder, etc...
»» Jedesmal, wenn ich über diese Elemente fahre, dann wird die einklapp-funktion ausgelöst. Ich weis nicht, woran es liegt. Könnt ihr mir helfen?

Am Event-Bubbling.
Mouseover- und Mouseout-Ereignisse passieren bei den Kindelementen, steigen auf und lösen den entsprechenden Handler beim div-Element aus.
Besser wären die Ereignisse mouseenter und mouseleave, allerdings kennt die nur der IE. In anderen Browsern kann man sie emulieren, indem man abfragt, woher die Maus kam bzw. wohin sie geht (relatedTarget bzw. fromElement/toElement) und ob dieses Element im div liegt oder außerhalb.
Beispiel dafür:
http://molily.de/temp/mouseenter-mouseleave.html

schönes Beispiel. Und es funktioniert auch.
Nur ich hab die Funktionen over() und out() jetz für meine zwecke mal umgewandelt. Jetzt zeigt mir der FF: this.contains is not a function
auch auf der SELFHTML-Erklärung( http://de.selfhtml.org/javascript/objekte/anzeige/all_contains.htm@title=hier ) zeigt er mir das an. Nur warum funktioniert die Methode bei dir, aber überall anders nicht? Und das bei ein und demselben Browser ...
Hier nochmal der abgewandelte Code:

  
function over (e)  
			{  
				    e           = e               || window.event;  
				var target      = e.target        || e.srcElement;  
				var fromElement = e.relatedTarget || e.fromElement || false;  
  
				if (this.contains(fromElement) || fromElement == this)  
				{  
					return;  
				}  
				alert("Mouseover");  
			}  
			function out (e)  
			{  
				    e         = e               || window.event;  
				var target    = e.target        || e.srcElement;  
				var toElement = e.relatedTarget || e.toElement || false;  
  
				if (this.contains(toElement) || toElement == this)  
				{  
					return;  
				}  
				alert("Mouseout");  
			}  
  
//Die hier ist neu dazugekommen:  
function window_onload()  
			{  
				document.getElementsByClassName("bereich")[0].onmouseover = over;  
				document.getElementsByClassName("bereich")[0].onmouseout  = out;  
			}  

  
<!-- Und hier nochmal der HTML-Teil -->  
<div class="bereich" title="250">  
			<div class="bereich_header">  
				Vom Hexadezimalen ins Dezimale -> Farbcode  
			</div>  
			<div class="bereich_content">  
				Eingabe des Hexadezimalwertes: <input type="text" id="eingabe_hex">  
				<input type="button" onclick="hex_berechne()" value=" Berechnen ">  
				<br>  
				<b>Ergebnis:</b><br>  
				<span id="hex_output"></span>  
			</div>  
		</div>  

MfG. Christoph Ludwig