Javascript: CSS-Klasse bei MouseOver wechseln
Es gibt verschiedene Arten, Effekte umzusetzen, welche beim Überfahren mit der Maus aktiv werden. So kann man zum Beispiel die CSS-Klasse für ein Objekt mit Hilfe des MouseOver-Events und einer simplen JavaScript-Funktion wechseln.
Grundsätzlich sollte das wechseln allein mit CSS möglich sein:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Beispiel : Effekt bei MouseOver</title>
<style type="text/css">
.standard { color:black; }
.standard:hover {
color:green;
border: 1px solid red;
background-color:yellow;
}
</style>
</head>
<body>
<span class="standard">
Fahren Sie mit der Maus über diesen Text
</span>
</body>
</html>
Das Beispiel nutzt das Pseudo-Element “:hover“, welches von allen gängigen Browsern interpretiert wird. Somit wechselt sich die Klasse automatisch, wenn der Mauszeiger das jeweilige Element erreicht.
Im Firefox läuft dieses Beispiel auch ohne weitere Probleme, der Internet-Explorer aktzeptiert auch in der neuesten Version das “:hover“-Pseudo-Element auschließlich bei “a“-Elementen (Hyperlinks).
Das ganze kann nun durch eine kleine Änderung in CSS und einer einfachen Javascript-Funktion dennoch umsetzbar gemacht werden.
Dazu wird bei MouseOver die CSS-Klasse des jeweiligen Objektes geprüft und entsprechend gewechselt. (toggle):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS-Beispiel : Effekt bei MouseOver</title>
<style type="text/css">
.standard { color:black; }
.standard_hover {
color:green;
border: 1px solid red;
background-color:yellow;
}
</style>
<script type="text/javascript">
function toggleCSS(obj) {
var cssclass = obj.className;
var stdclass = cssclass.replace("_hover", "");
if (stdclass == cssclass) {
obj.className = stdclass+"_hover";
} else {
obj.className = stdclass;
}
}
</script>
</head>
<body>
<span class="standard" onMouseOver="toggleCSS(this);" onMouseOut="toggleCSS(this);">
Fahren Sie mit der Maus über diesen Text
</span>
</body>
</html>
Diese Funktion wird nun aufgerufen, sobald der Mauszeiger über das Element fährt und nochmal, sobald er das Element wieder verlässt.
Beim Funktionsaufruf wird das betreffende Element mit “this” übergeben. Nun wird zuerst die aktuell gesetzte CSS-Klasse ausgelesen. Dannach wird geprüft, ob es sich dabei um die “_hover“-Klasse oder die Standard-Klasse handelt. Je nach dem, welche der beiden Klassen gesetzt wurde, wird die entsprechend andere Klasse gesetzt.
Somit ist der “MouseOver“-Effekt auch für den IE und andere Browser verfügbar.
Senden...