Hallo!
Für eine Bild-Galerie bastele ich eine Thumbnail-Liste. Der Bild-Titel soll erst dann erscheinen, wenn der Benutzer mit dem Mauszeiger über den Thumbnail hovert.
Dazu habe ich einen <div>-Container, der den Bild-Titel enthält, auf display:none gesetzt. Erst beim hovern über den Link wird der <div>-Container auf display:inline gesetzt.
Das Problem: in FF 3 klappt das wunderbar, in Opera 9.25 auch. Nur IE 7 will nicht:
- die Beschreibung erscheint nicht
- der Thumbnail wird unsichtbar
Ein Link sagt mehr als tausend Worte:
Hier könnt ihr das ganze in Aktion sehen und selbst testen, ob es geht.
Weiß vielleicht jemand, woran das liegt? Was muss ich ändern, dass der IE mitspielt? Vielen Dank!
Hier der Code der Thumbnail-Liste mitsamt CSS:
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="de-DE">
<head>
<style type="text/css">
div.user_hover {
position: absolute;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
padding-top: 25px;
padding-left: 8px;
display: none;
z-index: 10;
text-align: left;
font-style: normal;
font-variant: normal;
font-weight: bold;
line-height: normal;
font-size-adjust: none;
font-stretch: normal;
-x-system-font: none;
/* opacity: 0.8; */
}
span.caption {
background-color: white;
color: #333;
font-weight: bold;
font-size: 90%;
padding: 2px;
font-family: Georgia;
line-height: 140%;
}
a.brick {
display: block;
list-style-type: none;
overflow: hidden;
font-style: normal;
-x-system-font: none;
position: relative;
text-decoration: none;
}
a.brick:hover {
cursor: pointer;
overflow: visible;
z-index: 11;
}
a.brick:hover div.user_hover {
display: inline;
}
div#thumblistcont {
max-width: 800px;
text-align: left;
position: absolute;
left: 50%;
clear: both;
margin: 50px 0 0 -400px;
}
img {
border: 0;
}
</style>
<title>Test: Hover-Effekt in Thumbnail-Liste</title>
</head>
<body>
<div id="thumblistcont">
<ul style="list-style: none; display: inline;" class="month_archive">
<li style="display: block; float:left; list-style-type:none; padding:6px">
<a class="brick" href="bild_seite_1.htm">
<img src="thumb1.jpeg" width="120" height="120" alt="Lobster Monster" />
<div class="user_hover">
<span class="caption">Wagen</span>
</div>
</a>
</li>
<li style="display: block; float:left; list-style-type:none; padding:6px">
<a class="brick" href="bild_seite_2.htm">
<img src="thumb2.jpeg" width="120" height="120" alt="Rima" />
<div class="user_hover">
<span class="caption">Gras</span>
</div>
</a>
</li>
<li style="display: block; float:left; list-style-type:none; padding:6px">
<a class="brick" href="bild_seite_3.htm">
<img src="thumb3.jpeg" width="120" height="120" alt="Möwe, Welle" />
<div class="user_hover">
<span class="caption">Band</span>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
