|
|||
Durch :active Kindelement einblenden und "einfrieren" und Transition Spielerei
Hallo zusammen,
ich habe ein Glossar auf meiner Seite erstellt und bekomme es nicht hin, dass beim klicken des "Fachbegriffs" der dazugehörige Content stehen bleibt. Das Glossar ist bei einer Pixelbreite < 611 px sichtbar. Dazu hätte ich gerne, dass der Content langsam eingeblendet wird. Transition funktioniert hier irgendwie nicht. Wenn ihr auf Bartstile klickt seht ihr, dass beim :hover über die jeweilige box die box auf der x Achse verschoben wird. Wenn der Mauszeiger woanders hinbewegt wird, springt die box ruckartig in die Ausgangsposition zurück. Gibt es eine Möglichkeit, dass das zurückspringen ebenfalls "smooth" abläuft? Das Glossar ist über Barttrimmer Test | Bartschneider Test ++ TOP 5 inkl. Testvideo ++ ganz unten zu finden. Die erwähnten Boxen unter Bartvariationen | Bartstile | Barttypen Besten Dank im Voraus und erstmal Gute Nacht [emoji28] Gesendet von iPhone mit Tapatalk |
Sponsored Links |
|
|||
Zitat:
Wie soll er stehen bleiben? Was meinst du denn mit "stehen bleiben"? Zitat:
Das bedeutet, dass der effekt nur beim hovern passiert. Wenn der Mauszeiger woanders hinbewegt wird, dann trifft der :hover Fall nicht mehr zu und dadurch gelten auch die Regeln nicht mehr, die in .bartbox:hover festgelegt wurden. Damit die Animation sowohl beim hovern wie auch beim austritt startet, muss die Eigenschaft transition auf das normale .barbox Element angewendet werden Code:
.bartbox { transition: all .7s } |
Sponsored Links |
|
|||
Zitat:
Zitat:
Sobald man auf den Begriff wie bspw. NimH Akku klickt, so wird die Beschreibung eingeblendet. Lässt man die Maustaste wieder los, so verschwindet die Beschreibung auch wieder. Ich möchte aber nicht, dass die Beschreibung wieder verschwindet, sondern erst, wenn nochmals auf den Begriff NimH Akku geklickt wird. Also quasi ein "Auf- und zuklappen" |
|
|||
Elemente per Mausklick ein- und ausblenden funktioniert leider nur per javascript.
Man kann per css :target Elemente mit einem Klick einblenden aber nicht wieder per klick ausblenden. Aber ich sehe schon MrMurphy hier schreiben: Zitat:
Momentan sind alle wichtigen Informationen auf den ersten Blick ersichtlich und übersichtlich dargestellt. Die Erläuterungen hinter einem zusätzlichen Klick zu verstecken, ist hier unnötig. Das sieht vielleicht fancy aus aber ist nicht benutzerfreundlich. |
|
|||
Okay verstehe. Ich bin am Schwanken: Entweder ist das Glossar auf Smartphones dann komplett ausgeklappt und man muss sich zum footer durchschlagen, oder ich löse das ganze per :hover, da auf dem Smartphone :hover durch "Klick" ausgelöst wird und beim "danebentippen" der Inhalt wieder verschwindet.
Keine tolle Lösung, daher bin ich noch am überlegen :magreren: Besten Dank! |
|
|||
Elemente per Klick ein- und ausblenden funktioniert sehr wohl auch ohne Javascript. Hier hast du zB 4 verschiedene Möglichkeiten um dein Vorhaben umzusetzen, welche am Besten für dein Projekt passt musst du natürlich selber entscheiden.
|
|
|||
Zitat:
Methode 2 wäre ja genau das, was der Thread Ersteller gesucht hat. |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Wie Transition starten, wenn die Seite geladen wird? | bigtail | CSS | 3 | 20.10.2012 23:07 |