[Mitglied Alex…] Geschrieben Juli 10, 2013 Teilen Geschrieben Juli 10, 2013 Hallo zusammen Ich habe hier ein paar Bilder, für diese Projektbilder hätte ich gerne ein hover welches ein Div sein sollte, ich welches ich Text schreiben kann und dieser dann entsprechend tagen kann. ab.blackdesigns.ch/werbung.html Ich finde aber keine Möglichkeit wie ich einem bild oder einem Div ein hover zuweisen kann, welches dann eben ein anderes div oder blockelement ist. Falls möglich sollte es eine variante alleine mit css3 sein. Danke schonmal für eure Hilfe Link zu diesem Kommentar
[Mitglied lars…] Geschrieben Juli 10, 2013 Teilen Geschrieben Juli 10, 2013 Ganz einfache Variante: <div id="wrapper"> <img src="foobar.jpg" class="hover" /> <div class="image-caption">foobar caption</div> </div> <style> #wrapper .image-caption { position:relative; bottom:0px; left:0px; visibility:hidden; } #wrapper:hover .image-caption { visibility:visible; }</style> Link zu diesem Kommentar
[Mitglied Seba…] Geschrieben Juli 10, 2013 Teilen Geschrieben Juli 10, 2013 Richtig, wobei das <img src="foobar.jpg" class="hover" /> nichts zur Funktionalität beiträgt, es braucht also die Klasse "hover" nicht. Eine Lösung ohne ein Wrapper-DIV sähe so aus: <div class="aktivator">fahr hier drüber 1</div> <div class="zeigmich">hier bin ich 1</div> <div class="aktivator">fahr hier drüber 2</div> <div class="zeigmich">hier bin ich 2</div> <style> .aktivator + .zeigmich { display:none; } .aktivator:hover + .zeigmich { display:block; } </style> Der +-Selektor formatiert das nächstfolgende Geschwister-Element mit der Klasse .zeigmich nach einem Element mit der Klasse .aktivator. display:none; blendet das Element erstmal komplett aus. Wird nun ein .aktivator überfahren (:hover), wird das direkt darauf folgende .zeigmich umformatiert, display:block bewirkt dass es angezeigt wird. Komplexere Selektoren sind mit Jquery möglich (wähl das erste <p> das keine sonderklasse hat im dritten <div> zwei hierarchien weiter oben aus), werden aber nur gebraucht wenn die HTML-Struktur aus anderen Gründen anders aufgebaut ist. Link zu diesem Kommentar
[Mitglied Seba…] Geschrieben Juli 10, 2013 Teilen Geschrieben Juli 10, 2013 Verschärfte Variante, die ohne Klassen auskommt: <div>fahr hier drüber 1</div> <div>ich versteck mich bis du mich rufst 1</div> <div>fahr hier drüber 2</div> <div>ich versteck mich bis du mich rufst 2</div> <style> div:nth-of-type(2n+1) { display:none; } div:nth-of-type(2n+0):hover + div { display:block; } </style> heißt: jedes zweite (ungerade, gezählt ab 0, nicht ab 1!) DIV wird erst mal versteckt (also die DIVS 1, 3, ...). Bis man über ein DIV mit gerader Zählung drüberfährt (die DIVs mit den Nummern 0, 2, ...). Wenn das passiert, wird das nächstliegende DIV mit display:block wieder angezeigt. Vorteil: sehr kompakte HTML-Struktur Nachteil: sehr starre HTML-Stuktur ... ein zusätzliches DIV auf gleicher Ebene irgendwo dazwischen, und die Zählung stimmt nicht mehr. 1 Link zu diesem Kommentar
[Mitglied Alex…] Geschrieben Juli 11, 2013 Themen-Ersteller Teilen Geschrieben Juli 11, 2013 danke leute, ich habe im internet noch einen anderen css3 transform trick gefunden ;) Link zu diesem Kommentar
Ralf Herrmann Geschrieben Juli 11, 2013 Teilen Geschrieben Juli 11, 2013 Den du dann im Interesse aller ruhig hier verlinken kannst. »Mein Problem hat sich erledigt und nach mir die Sintflut« ist immer nicht so nett. Übrigens, in unserer Werkschau gibt es so einen Hover-Effekt ja auch. Der Hover-Text sitzt einfach unsichtbar in dem DIV-Container, in dem das Bild im Hintergrund angezeigt wird. Beim Darüberfahren wird der Text dann sichtbar gemacht. Link zu diesem Kommentar
Empfohlene Beiträge
Erstelle ein Benutzerkonto oder melde dich an, um zu kommentieren
Du musst ein Benutzerkonto haben, um einen Kommentar verfassen zu können
Benutzerkonto erstellen
Neues Benutzerkonto für unsere Community erstellen. Es ist einfach!
Neues Benutzerkonto erstellenEinloggen
Du hast bereits ein Benutzerkonto? Melde dich hier an.
Jetzt anmelden