Bildschreibung bei Hover über andem Element

L

LeMarkus

Mitglied
Hallo,
ich habe ein Problem und hoffe es bestmöglich beschreiben zu können, da ich gerade kein Beispiel dazu finde. Falls ihr es nicht versteht, fragt bitte einfach nach. Ich habe auch ein Bild angehängt zur Beschreibung.
Ich will drei nebeneinanderliegenden Bildern in li-Elementen eine Beschreibung verpassen. Diese Beschreibung soll jeweils rechts oder links (je nachdem wo Platz ist) neben dem gehoverten Bild auftauchen. Also der Aufbau sieht so aus, auch auf dem Bild zu erkennen:

BILD1 | BILD 2 | BILD 3

Wenn ich nun über BILD1 hovere, dann soll eine grüne Fläche überhalb von BILD2 auftauchen. Diese graue Fläche enthält eine Beschreibung. Das gleiche gibt auch für alle anderen Bilder. Nur, dass bei Hover über BILD3 logischerweise die Beschreibung bei BILD2 entsteht, da es kein BILD4 gibt.

Dies ist soweit kein Problem. Ich habe einfach li-Elemente genommen, welche jeweils ein "div-container" enthalten. Dieses div wurde absolut über dem nebenliegenden Bild positioniert und blendet sich ein bei hover. Funktioniert super. Allerdings - und da liegt mein Problem - soll die Beschreibung wieder verschwinden, sobald man von dem Bild runtergeht mit der Maus. Das heisst, dass die Beschreibungsbox nicht hoverbar sein soll. Nur leider passiert dies genau bei mir.
Sprich: Wenn ich über BILD1 hovere entsteht wie erwünscht die Beschreibung über BILD2. Wenn ich mich nun aber mit der Maus von BILD1 zu BILD2 bewege, dann bleibt die Beschreibung stehen. Diese soll aber weg gehen, sobald die Maus über der Beschreibung hovert bzw. BILD1 verlässt, so dass BILD2 wieder sichtbar und interagierbar wird. Sobald ich ein Beispiel finde, werde ich es euch zeigen, anbei ein Bild

EDIT: habe leider nur ein Flashbeispiel gefunden auf die Schnelle:

http://www.olivierbossel.com/

Sobald man über ein Bild hovert entsteht recht davon eine Beschreibung, welche nicht hoverbar ist!

EDIT 2: habe meinen Code vergessen
Code: 
<ul class="clearfix">
			<li><a href=""><img class="director" src="images/home_juan.png" /></a>
			<div class="right">
			Beschreibung
			</div>
			</li>
			<li><a href=""><img class="director" src="images/home_patrick.png" /></a>
			<div class="right">
			Beschreibung
			</div>
			</li>
			<li class="last" ><a class="director" href=""><img src="images/home_alex.png" /></a></li>
		</ul>
Code: 
#leadership { margin-top: 30px; width: 330px; float:right;  }
#leadership ul li { position: relative; margin-right: 2px; list-style-type: none; float: left; }
.director { width: 109px; height: 153px; }
#leadership ul li div.right { 
	display: none;
	color: #d6d098;
	z-index: 1;
	top: 0;
	left: 111px;
	width: 109px;
	height: 153px;
	position: absolute; 
	background-color: #534e3b;
	background-image: url(http://www.threeview.com/include/images/back_grey.png);
}
#leadership ul li:hover div.right { display: block; }
#leadership ul li.last { margin-right: 0px; }
 

Anhänge

  • info_home.png
    info_home.png
    23 KB · Aufrufe: 7
Zuletzt bearbeitet:
Dass die Beschreibung erst beim vollständigen Verlassen des Listenpunktes verschwindet, liegt in der Natur der Sache, sprich deinem gewählten CSS-Selektor li:hover div, der für das Nachfahrenelement gilt, und das solange, wie sich der Mauszeiger im Anzeigebereich des <li>-Elements befindet.

Für dein Vorhaben müsstest du stattdessen den Selektor für benachbarte Elemente nutzen, also a:hover + div.
 
Zuletzt bearbeitet:
Ok vielen Dank, ich verstehe allerdings die Verwendung von den benachbarten Selektor nicht wirklich, also wie das in meinem Beispiel funktionieren soll. Und ja deinen link habe ich auch schon gelesen, aber das habe ich noch nie gesehen bisher. Ich werde es trotzdem mal weiter versuchen.
 
In deinem HTML-Code stellt das <div>-Element das Nachbarelement des <a>-Elements dar, das in CSS mit besagtem Selektor spezifiziert / angesprochen werden kann.

Aus:
CSS: 
#leadership ul li:hover div.right { display: block; }

wird demnach:
CSS: 
#leadership ul li a:hover + div.right { display: block; }

Die Anzeige des <div>-Elements ist damit davon abhängig, ob der Mauszeiger sich über dem <a>-Element incl. jeweiligem Bild befindet oder nicht, und unterscheidet sich im Verhalten gegenüber deinem bislang verwendeten Selektor.
 
Zuletzt bearbeitet:
Ah ok verstehe, scheint doch recht einfach zu sein, anders as ursprüngich gedacht. Werde es morgen gleich testen. Da ich dieses + allerdings noch nie wirklich benutzt habe, lediglich ein paar ma gesehen, frage ich mich, ob das nur in den modernen Browser funktioniert oder überall?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück