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
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
Zuletzt bearbeitet: