nicht angemeldet
Mouseover Probleme bei Opera 6
Hallo,
Opera 6 macht Probleme beim Mouseover-event. Und zwar nur der Opera6, Opera 5 und 7 haben folgendes Problem nicht:
ich habe zwei absolut positionierte DivTags, die sich außerdem überlappen. Jedes DivTag wechselt beim mouseover die Farbe und beim mouseout nimmt es wieder die ursprüngliche an. (natürlich kann man bei den mouseevents auch was anderes machen).
Wenn ich über vom untenliegenden auf das obenliegende DivTag wechsel haben BEIDE DivTags die Mouseover-Farbe, obwohl das Event ja eigentlich nur bei einem DivTag greifen soll (alle anderen Browser interpretieren das so, auch Opera5/7).
Fahre ich mit der Maus weiter (immer noch auf dem obenliegenden DivTag) über den Rand des untenliegenden (den man nicht sieht), dann erst greift das MouseOUT event des unteren und wechselt die Farbe.
Opera 6 kommt also irgendwie nicht ganz klar. Nur komisch das Opera 5 diese Probleme nicht hat!
Hat vielleicht jemand von euch ähnlich erfahrungen gemacht??
Und weiß einer wie ich das lösen kann?
Gruß
Christian
-
Hallo Christian,
ich habe zwei absolut positionierte DivTags, die sich außerdem überlappen. Jedes DivTag wechselt beim mouseover die Farbe und beim mouseout nimmt es wieder die ursprüngliche an. [...] Wenn ich über vom untenliegenden auf das obenliegende DivTag wechsel haben BEIDE DivTags die Mouseover-Farbe, obwohl das Event ja eigentlich nur bei einem DivTag greifen soll
Tatsächlich, mit folgendem Code (Markup, Styles und Scripts vermengt) konnte ich es in Opera 6.05 reproduzieren:
<div style="position:absolute; top:100px; left:100px; width:100px; height:100px; background-color:red;" onmouseover="this.style.backgroundColor='#a00'" onmouseout="this.style.backgroundColor='#f00'"></div>
<div style="position:absolute; top:150px; left:150px; width:100px; height:100px; background-color:blue;" onmouseover="this.style.backgroundColor='#00a'" onmouseout="this.style.backgroundColor='#00f'"></div>Es passiert exakt das von dir Beschriebene.
Und weiß einer wie ich das lösen kann?
Frage dich zuerst einmal, ob es nötig ist, dass sich die Elemente überlappen - falls nicht, begrenze, sodass sie sich nicht überlappen. Vermutlich hast du diese Möglichkeit aber schon ausgeschöpft.
Es bleibt nur die Möglichkeit, beim Feuern des Mouseover-Events des einen Elements den onmouseout-Code des anderen Elements auszuführen, somit ist immer gewährleistet, dass nur ein Element hervorgehoben ist:
Styles:
#eins {position:absolute; top:100px; left:300px; width:100px; height:100px; background-color:red;}
#zwei {position:absolute; top:150px; left:350px; width:100px; height:100px; background-color:blue;}Markup und Scripts, vermengt:
<div id="eins" onmouseover="document.getElementById('zwei').style.backgroundColor='blue'; this.style.backgroundColor='#a00'" onmouseout="this.style.backgroundColor='red'"></div>
<div id="zwei" onmouseover="document.getElementById('eins').style.backgroundColor='red'; this.style.backgroundColor='#00a'" onmouseout="this.style.backgroundColor='blue'"></div>Natürlich ist das ein wenig Overkill...
Grüße,
Mathias