Hallo Leute,
mein Problem kurz erläutert:
Per JavaScript wird einer Klasse (div1) onclick der Zusatz "active" angehängt, der für diese div andere css-Definitionen hat. Dieses kann auch onclick wieder rückgängig gemacht werden.
Das funktioniert soweit!!!
Nun soll allerdings auch der aktive Zustand (div1 active) bei onmouseout wieder in den Urzustand (div1) gesetzt werden. Das funktioniert nicht wirklich gut, da bei der Ausführung dieses
Events eine Art "flackern" auftritt. D.h. sobald ich die Maus nur geringfügig bewege, wird das Event ausgelöst. Wie kann ich das unterbinden?
(Die Funktion "aus()" ist momentan nur testweise eingebunden - daher nicht so elegant).
Langer Rede, kurzer Code:
Alles anzeigen
Grüße
Elvis
mein Problem kurz erläutert:
Per JavaScript wird einer Klasse (div1) onclick der Zusatz "active" angehängt, der für diese div andere css-Definitionen hat. Dieses kann auch onclick wieder rückgängig gemacht werden.
Das funktioniert soweit!!!
Nun soll allerdings auch der aktive Zustand (div1 active) bei onmouseout wieder in den Urzustand (div1) gesetzt werden. Das funktioniert nicht wirklich gut, da bei der Ausführung dieses
Events eine Art "flackern" auftritt. D.h. sobald ich die Maus nur geringfügig bewege, wird das Event ausgelöst. Wie kann ich das unterbinden?
(Die Funktion "aus()" ist momentan nur testweise eingebunden - daher nicht so elegant).
Langer Rede, kurzer Code:
HTML-Quellcode
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
- <title>Untitled Document</title>
- <style type="text/css">
- .div1 {
- width: 450px;
- height: 100px;
- background: #fc0;
- }
- .div1.active {
- height: 350px;
- background: #dd0;
- }
- </style>
- <script language="JavaScript">
- var offen=0;
- function display(o)
- {
- if (offen == 0) {
- o.parentNode.className += " active";
- offen = 1;
- }
- else {
- o.parentNode.className = "div1";
- offen=0;
- }
- }
- function aus()
- {
- document.getElementById("div1").className = "div1";
- }
- </script>
- </head>
- <body>
- <div class="div1" id="div1" onmouseout="aus()">
- <a href="#" class="Link" onclick="display(this)">CLICK</a>
- <ul>
- <li>Punkt 1</li>
- <li>Punkt 2</li>
- <li>Punkt 3</li>
- </ul>
- </div>
- </body>
- </html>
Grüße
Elvis