Over: anzeigen, out: verstecken
0 0 
dedlfix
1
0 
Gunnar Bittersmann
Over: anzeigen, out: verstecken
Hallo!
Ich habe mehrere Überschriften und nun möchte ich, dass wenn ich mit der Maus drüber fahre, der Text dazu angezeigt wird und wenn ich mit dem Mauszeiger diesen Bereich verlasse, er wieder zugeklappt wird und falls die Maus sich auf eine andere Überschrift bewegt, der dazu gehörige Text angezeigt wird.
Ich habe folgenden Code gefunden:
<script>
function toggle(theDiv) {
var elem = document.getElementById(theDiv);
elem.style.display = (elem.style.display == "none")?"":"none";
}
//-->
</script>
<div id="test">
<a href="#" onmouseout="toggle('testLayer1');return false;" onmouseover="toggle('testLayer1');return false;">Open and
>Close</a>
</div>
<div id="testLayer1" style="display: none;">Text 1</div>
<div id="Div1">
<a href="#" onmouseout="toggle('testLayer1');return false;" onmouseover="toggle('testLayer2');return false;">Open and
>Close</a>
</div>
<div id="testLayer2" style="display: none;">Text 2</div>
Zwar öffnet er diese Bereiche bei onmouseover, aber wenn ich die Maus öfters darüber bewege, so sind am Ende alle Bereiche sichtbar. Irgendwie müsste ich wohl einbauen, dass bei gleicher Zugehörigkeit, die anderen zugeklappt werden. Kann mir einer helfen?
-
Ich habe folgenden Code gefunden:
vergiss den Mist gleich wieder!
<head> ... <style="text/css"> div#inhalt div p {display:none} div#inhalt div:hover p {display:block} </style> </head> <body> ... <div id="inhalt"> <div>Open and Close <p>Text 1</p> </div> <div>Open and Close <p>Text 2</p> </div> </div> ... </body> </html>-
Hi!
Ich habe folgenden Code gefunden:
vergiss den Mist gleich wieder!Ganz vergessen kann er den nicht, wenn er alte IE bedienen will, denn die kennen :hover nicht für div. Da geht nur Javascript als Workaround, wenn man nicht a-Elemente missbrauchen will.
Lo!
-
Hi!
Ich habe folgenden Code gefunden:
vergiss den Mist gleich wieder!Ganz vergessen kann er den nicht, wenn er alte IE bedienen will,
aber doch nicht in der Form!
mit den vorgeschlagenen Änderungen und diesem Stückchen JavaScript sieht's so aus
<head> ... <style type="text/css"> div#inhalt div p {display:none;} div#inhalt div:hover p, div#inhalt div.hover p {display:block;} </style> <script type="text/javascript"> window.onload=function() { var div=document.getElementById("inhalt").getElementsByTagName("div"); for (var i=0;i<p.length;i++) { div[i].onmouseover=function() {this.className="hover"); div[i].onmouseoout=function() {this.className=""); } } </script> </head> <body> ... <div id="inhalt"> <div>Open and Close <p>Text 1</p> </div> <div>Open and Close <p>Text 2</p> </div> </div> ... </body> </html>-
Danke probiert einwandfrei. Falls ich noch eine ID zu den Divs hinzufügen würde, müsste ich bei der Javaskript Funktion noch
.getElementsByTagName("irgendeineid");hinzufügen, richtig?
Frohe Weihnachten schon mal :)
-
.getElementsByTagName("irgendeineid");
Ups, wenn schon bytagID, aber ich frage mich ob das überhaupt geht, da man ja schon am Anfang auf die ID zurückgreift. Wie könnte ich also jetzt auf die ID von
getElementsByTagName("div")zugreifen?-
Ups, wenn schon bytagID,
nö: getElementById
Wie könnte ich also jetzt auf die ID von
getElementsByTagName("div")zugreifen?Da gibt's keine ID! Es gibt auch keinerlei Notwendigkeit da irgendwo zuzugreifen!
-
-
Danke probiert einwandfrei. Falls ich noch eine ID zu den Divs hinzufügen würde, müsste ich bei der Javaskript Funktion noch
.getElementsByTagName("irgendeineid");hinzufügen, richtig?
ich habe nicht mal 'ne Ahnung warum du irgendwo irgendwelche IDs einfügen willst. Wenn du ein weiteres DIV mit dieser Funktionalität haben willst musst du es nur in das umschließende DIV mit der id "inhalt" einfügen, den Rest macht das CSS (in ollen IEs mit JavaScript-Unterstützung) allein, ohne dass du dort etwas ändern müsstest (und schon gar nicht solchen Unsinn wie angegeben):
<div id="inhalt"> <div>Open and Close <p>Text 1</p> </div> <div>Open and Close <p>Text 2</p> </div> <div>Open and Close <p>Text 3</p> </div> <div>Open and Close <p>Text 4</p> </div> ... </div>
-
-
-
-
<style="text/css">
FAIL - wie wärs mit type="text/css"?
div#inhalt div p {display:none}
div#inhalt div:hover p {display:block}Das würde ich gegen
div#inhalt div:hover p,
div#inhalt div.hover p { display:block; }ersetzen und bei Browsern die :hover auf div-Elemente nicht verstehen die _echte_ Klasse "hover" per JavaScript ergänzen oder entfernen.
-
-
@@Code:
nuqneH
Ich habe mehrere Überschriften und nun möchte ich, dass wenn ich mit der Maus drüber fahre, der Text dazu angezeigt wird und wenn ich mit dem Mauszeiger diesen Bereich verlasse, er wieder zugeklappt wird und falls die Maus sich auf eine andere Überschrift bewegt, der dazu gehörige Text angezeigt wird.
Ich würde das Auf- und Zuklappen mit beim Überfahren mit der Maus (an Nutzer, die gar nicht mit der Maus navigieren, hast du gedacht?), sondern per Click auf die Überschrift realisieren.
Dann braucht man für moderne Browser auch gar kein JavaScript: http://forum.de.selfhtml.org/archiv/2009/4/t186180/#m1236356 ff., http://forum.de.selfhtml.org/archiv/2009/6/t188052/#m1251404
Qapla'
--
Alle Menschen sind klug. Die einen vorher, die anderen nachher. (John Steinbeck)