Problem: Farbiger Rahmen bei Grafiklinks mit CSS (:hover)
Stephan
- css
Hallo zusammen, folgendes Problem gilt es zu lösen (IE 5.5):
Ich habe eine Seite mit Thumbnails als Links. Bei anklicken öffnet sich ein Pop-Up mit dem Bild in echter Größe. Soweit, so gut. Nun möchte ich, dass ein farbiger Rahmen um das Bild erscheint, wennn ich mit der Maus über dem Thumnail stehe. Also habe ich ein wenig CSS gespielt und das gewollte erreicht. Leider, und nun kommt das Problem, funktioniert jetzt der Link nicht mehr richtig. Der Link funktioniert nämlich nur noch, wenn ich auf den (zwei Pixel breiten) Rahmen klicke. Entferne ich das "class=..." funktioniert zwar der Link wieder, aber der Rahmen naturgemäss nicht mehr.
Was läuft hier falsch ?
=====================================================
Der Link sieht so aus:
Das Javascript:
function PopupFenster(file) {
F = window.open(file,"Popup","width=800,height=600");
F.window.focus();
}
=====================================================
Ausschnitt aus CSS-Datei:
a.grafik {
display:block;
width:125px;
margin-top:4px;
font-family:Verdana, Tahoma, sans-serif;
font-size:15px;
font-weight:bold;
}
a.grafik:link {
color:silver;
border:2px solid silver;
text-decoration:underline;
}
a.grafik:visited {
border:2px solid blue;
text-decoration:none;
}
a.grafik:hover {
border: 2px solid yellow;
text-decoration:none;
cursor:crosshair;
}
a.grafik:active {
border: 2px solid red;
text-decoration:none;
}
hallo,
Was läuft hier falsch ?
z.B.
<IMG SRC="images/thumbs/05050001_tn.JPG" WIDTH="150" HEIGHT="100">
^^^^^^^^^^
a.grafik {
display:block;
width:125px;
^^^^^^^^^^^^^^^^^^
wozu brauchst du folgendes?
font-family:Verdana, Tahoma, sans-serif;
font-size:15px;
font-weight:bold;
}
versuch es mal so:
a.grafik:hover {
text-decoration:none;
cursor:crosshair;
}
a.grafik:hover img { border:2px solid yellow; }
Grüße
Thomas