✔ Einblenden von z.B. div´s

[tutorina]

Hallo zusammen,
hoffentlich kann mir jemand helfen. Ich sitze schon den ganzen Tag und probiere:
Ich habe eine Rätselfrage. Daneben steht: Auflösung.
Wenn man jetzt auf das Wort Auflösung klickt, soll daneben die Auflösung auch sichtbar werden (ist auf hidden geschaltet). Da ich dies schon mal in css gemacht habe, weiss ich, dass dies auch zu bewerkstelligen ist. Ich steh heut aber etwas auf der Leitung.
Für eine kleine Hilfe wäre ich sehr dankbar.

 

[Maik]

Hi,

ich würde es so umsetzen:

a.solution:link, a.solution:visited {
  text-decoration:underline;
}
a.solution:active {
  border:none;
}
a.solution span {
  visibility:hidden;
  position:absolute;
  text-decoration:none;
}
a.solution:active span {
  visibility:visible;
}

<a href="#" class="solution">Auflösung<span>Hier folgt die Auflösung</span></a>

 

[tutorina]

Danke für die schnelle Antwort,
leider ist die Lösung wie bei "hover". Der Text sollte nach click aber stehen bleiben und evtl. nach nochmaligem click wieder verschwinden.

 

[Maik]

Versuch es mal hiermit:

a.solution:link, a.solution:visited {
  text-decoration:underline;
}
a.solution:active {
  border:none;
}
a.solution span {
  visibility:hidden;
  position:absolute;
  text-decoration:none;
}
a.solution:active span, a.solution:focus span {
  visibility:visible;
}

 

[tutorina]

Sorry Maik,
aber auch hier ändert sich nichts.
Ich habe ein javascript das funktioniert, aber ich möchte nur css. Ich habe im Internet nochmal danch geschaut, da ich das von dort mal hatte, finde es aber nicht mehr.
Da hatte man einen Text geschrieben, der mittendrin aufhörte. Dafür stand dann das Wort "mehr" dra. Beim Draufklicken erschien dann der Rest vom Text. Dies hatte ich soweit umgewandelt, dass es wie ich es jetzt vorhabe, klappte. Ich find´s aber nicht mehr.

 

[Maik]

Sorry, aber bei mir funktioniert das Stylesheet, wie von dir gewünscht.

Vielleicht hilft dir da http://www.cssplay.co.uk/menu/more.html bzw. http://www.cssplay.co.uk/menu/more_than.html, oder http://www.cssplay.co.uk/menu/some_more.html weiter?

 

[tutorina]

Grrrrrr........,
dort war ich schon, aber das habe ich nicht gefunden, das war nämlich genau das was ich meinte.
Danke

 

[tutorina]

Ich habe jetzt alles umgesetzt und es hat auch nicht funktioniert. Dann habe ich einen anderen Browser genommen und es funktioniert alles auch dein voriger Vorschlag. In Opera VS 9.01 geht es nicht.
In allen anderen Ja. Nochmals vielen Dank

 

[Maik]

Dass es im Opera-Browser nicht funktioniert, liegt dann wohl an seiner fehlerhaften Interpretation der :focus-Pseuoklasse:

Beachten Sie:

Opera ignoriert zunächst :focus und wendet die für diesen Zustand definierten Eigenschaften erst bei nachfolgendem :hover zusätzlich an.

• Quelle: http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#link_visited_focus_hover_active

 

[tutorina]

Hallo noch mal,
dachte alles ist ok, war wohl ein Satz mit X.
Wenn ich, wie du empfohlen:
<a href="#" class="solution">Auflösung<span>Hier folgt die Auflösung</span></a>
schreibe passiert folgends:
Die Seite geht hoch zum Anfang.
Wenn ich # wegmache, geht der Explorer auf im Ordner in dem das .html ist.
Verstehe nicht an was das liegt, da ich dieses Problem vorher auch nicht hatte.

Ich will endlich fertig werden.