Jump to content
Die Schriftmuster der Welt in einer Datenbank …

Div als Hover für ein Div

Empfohlene Beiträge

Alexander Bürgin

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
lars.schwarz

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
Sebastian Nagel

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
Sebastian Nagel

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.

  • Gefällt 1
Link zu diesem Kommentar

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

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 erstellen

Einloggen

Du hast bereits ein Benutzerkonto? Melde dich hier an.

Jetzt anmelden

Unsere Partner

FDI Type Foundry besuchen
Mit über 130.000 Fonts der größte Schriften-Shop im Internet.
Hier beginnt deine kreative Reise.
Entdecke hunderte Font-Sonderangebote.
Unser englischsprachiger Typografie-Kanal auf YouTube.
×
×
  • Neu erstellen...

🍪 Hinweis:

Wir benutzen funktionale Cookies.