Dass die
:hover-Pseudoklasse auch neben dem Bildelement anspringt, ist der
display:block-Deklaration für eben dieses
<img>-Element geschuldet.
Du kannst ja mal im Gegenvergleich überprüfen, wie es sich in den Browseransichten ohne diese Angabe verhält, wenn der Text über dem Bild eingeblendet wird.
Abhilfe schafft hier diese Regelerweiterung für das umschliessende
<span>, die dafür sorgt, dass sich seine Elementbreite aus dem Inhalt ergibt:
CSS:
span.wrapperBox {
float:left;
}
Soll dieses Element im Textfluß grundsätzlich aber garnicht zu seiner rechten Seite umflossen werden, muß für das im HTML-Code darauffolgende Element
clear:left angegeben werden.
Was die Fehldarstellung im IE7 betrifft, möchte ich anmerken, dass ich vorhin meinen Vorschlag nicht zunächst in einem Testlauf browserübergreifend und in älteren Browserversionen auf seine Funktionalität überprüft habe, sondern lediglich einen Lösungsansatz aufzeigen wollte, wie sich dein Vorhaben mit CSS umsetzen lässt. Im aktuellen IE8 funktioniert mein Code übrigens einwandfrei.
Jedoch, wenn ich die CSS-Regeln in den Selektoren umstelle, richtet der IE7 den Text auch über dem Bild aus:
CSS:
span.wrapperBox img {
display:block;
}
span.wrapperBox span {
display:none;
}
span.wrapperBox:hover span {
display:block;
position:absolute;
z-index:2;
margin-top:-50px; /* Element mit Text wird um 50px nach oben verschoben */
width:200px; /* entspricht der Bildbreite */
height:50px; /* entspricht der Bildhöhe */
background:#fff;
}
Falls du hier auch den IE6 berücksichtigst, empfehle ich dir
http://code.google.com/p/ie7-js/, da er die
:hover-Pseudoklasse ausschließlich für das
<a>-Element interpretiert.
mfg Maik
