mehrere Elemente an gleicher Stelle die ihren Raum einnehmen

[Gunnar Bittersmann]

@@ChrisB:

nuqneH

Elemente nicht „übereinander“ legen - sondern *neben*einander.

Hm, in die Richtung hatte ich auch gedacht. Nur nicht bis zuende.

Das Containerelement bekommt eine feste Breite, und overflow:hidden.
Die einzelnen „Items“ bekommen die gleiche feste Breite - und visibility:hidden und ein negatives margin-left entsprechend der Breite, um sie „auszublenden“.

Hm, da war ich auch fast.

Das Einblenden wird hier immer noch über JavaScript gemacht - das stattdessen mit :hover und irgendeinem Selektor zu regeln, wird dem interessierten Mitleser überlassen.

Angesichts der Tatsache, dass der Text bei mouseout stehenbleiben soll, wird _das_ nun mit CSS wirklich kaum gehen. Oder?

Anders sähe es bei click aus, dann würden sich Anker und :target anbieten.

Ich hab auch mal Beispiele hochgeladen. Im Beispiel 0 wird die display-Eigenschaft per JavaScript gesetzt. Sollte man nicht machen, das kann böse ins Auge gehen.

In Beispiel 1 werden per JavaScript lediglich Klassen gesetzt, die jeweilige Sichtbarkeit steht im Stylesheet.

Beispiel 2 ist die Umsetzung von ChrisBs Idee und kommt ohne Höhenberechnung per JavaScript aus.

Bei allen Beispielen wird ohne JavaScript der vollständige Text angezeigt und die dann überflüssigen Buttons ausgeblendet.

Qapla'