onmouseover funktioniert nicht unter IE/Chrome/Opera?

Zerberus777

Mitglied
Hallo,

warum funktioniert folgendes nur unter Firefox?

Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test</title>
    <style>
    div {width:300px;height:200px;background-color:yellow;}
    </style>

    <script>

    function transformiere() {
    document.getElementById("selectDiv").style="background-color:red";
    }

    function transformiereback() {
    document.getElementById("selectDiv").style="background-color:green";
    }

    </script>
  </head>
  <body>
  <h4><span onmouseover="transformiere(); style='color:red'" onmouseout="transformiereback(); style='color:green'">onmouseover</span></h4>
  <div id="selectDiv"></div>
  </body>
</html>


Gruß

Zerberus
 
Und wieder hast Du mir den Abend gerettet...
Wenn ich jetzt noch wüßte, wie ich in der Funktion den z-index zuweisen kann:
Code:
document.getElementById("selectDiv").style.z-index="1";
funktioniert nicht.
 
Das kannst Du hier nachlesen:
http://de.selfhtml.org/javascript/objekte/style.htm
Eine wichtige Regel müssen Sie kennen: Wenn in einem Script eine CSS-Angabe ausgelesen oder verändert werden soll, entfällt der Bindestrich, und der erste Buchstabe des Wortes hinter dem Bindestrich wird großgeschrieben. Die CSS-Eigenschaft background-color wird innerhalb eines JavaScripts also zu backgroundColor.
Tut man das nicht, interpretiert JS das "-" als arithmetisches Minuszeichen.
 
Und wieder hast Du mir den Abend gerettet...
Wenn ich jetzt noch wüßte, wie ich in der Funktion den z-index zuweisen kann:
Code:
document.getElementById("selectDiv").style.z-index="1";
funktioniert nicht.
Neben der angesprochenen falschen Syntax fehlt (im CSS) noch eine Regel zur Positionsart position, ohne diese die Schichtpositionierung nicht greift. Hierfür stehen absolute, relative oder fixed zur Auswahl.
 
Zurück