Jump to content

Div als Hover für ein Div


Alexander Bürgin

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 zum Beitrag
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 zum Beitrag
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 zum Beitrag
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.

Link zum Beitrag
Ralf Herrmann

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 zum Beitrag

Diskutiere mit …

Du kannst jetzt schreiben und dich später registrieren. Wenn du bereits einen Account hast, melde dich an, um von deinem Account aus zu schreiben.
Hinweis: Dein Beitrag muss von einem Moderator zunächst freigeschaltet werden.

Gast
Auf dieses Thema antworten ...

×   Du hast formatierten Text eingefügt.   Restore formatting

  Only 75 emoji are allowed.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
<p>Tierra Nueva – vier Fonts, basierend auf einer Karte Amerikas</p>
×
×
  • Neu erstellen...

Hinweis

Wie die meisten Websites, legt auch Typografie.info Cookies im Browser ab, um die Bedienung der Seite zu verbessern. Sie können die Cookie-Einstellungen des Browsers anpassen. Anderenfalls akzeptieren Sie bitte die Speicherung von Cookies. Weitere Details in der Datenschutzerklärung