nicht angemeldet
Hallo,
Es interessiert mich aber noch aus akademischen Gründen, warum der IE sich so verhält.
*g* Weil seine rendering engine im Zusammenhang mit JavaScript so programmiert ist.
Da MS den IE nicht quelloffen legt, kann man das allerdimgs nicht wirklich genau prüfen. Es sieht so aus als ob sichergestellt werden soll, dass JavaScript mouseover immer das Eelment trifft, welches unter der Mausposition tatsächlich _zu sehen_ ist.
Immer wenn sich Elemente überlappen und transparent sind, wird mouseout/mousover auch dann gefeuert, wenn ein Teil eines überlappten Elements, welcher eigentlich im Hintergrund liegt, aber sichtbar ist, unter der Maus steht. Das trifft auch für ein Element mit position:absolute zu, welches scheinbar nichts überlappt, denn es überlappt ja das HTML-Element.
Testcase:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>IE mouseover/out bei überlappenden Elementen</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#d1 {
width: 100px;
height: 100px;
border: 20px solid red;
}
#d2, #d4 {
position: absolute;
width: 100px;
height: 100px;
border: 20px solid green;
}
#d3 {
position: relative;
left: 50px;
top: -50px;
width: 100px;
height: 100px;
border: 20px solid blue;
}
</style>
</head>
<body>
<div id="monitor">Monitor</div>
<div id="d1" onmouseover="document.getElementById('monitor').innerHTML='over '+this.id" onmouseout="document.getElementById('monitor').innerHTML='out '+this.id"></div>
<div id="d2" onmouseover="document.getElementById('monitor').innerHTML='over '+this.id" onmouseout="document.getElementById('monitor').innerHTML='out '+this.id"></div>
<div id="d3" onmouseover="document.getElementById('monitor').innerHTML='over '+this.id" onmouseout="document.getElementById('monitor').innerHTML='out '+this.id"></div>
<div id="d4" onmouseover="document.getElementById('monitor').innerHTML='over '+this.id" onmouseout="document.getElementById('monitor').innerHTML='out '+this.id"></div>
</body>
</html>
viele Grüße
Axel