background-color bei a:hover img entfernen
0 0 
Detlef G.
0 
Gunnar Bittersmann
background-color bei a:hover img entfernen
Hallo,
ich habe den Links auf einer Seite im Falle von a:hover die background-color: black; zugewiesen. Diese Hintergrundfarbe wird auch bei verlinkten Grafiken angezeigt. Da mir das Hintergrund-Hover bei den Grafiken nicht gefällt, will ich es mit der Zeile a:hover img { border: 2px solid #000; background-color: none;} entfernen.
Leider funktioniert das nicht. Wie bekomme ich den Hover-Effekt bei den verlinkten Bildern weg? (ohne jedem Bild eine eine eigene Klasse zuzuweisen)
Zu Demonstration habe ich eine Beispielseite hochgeladen: http://fidu.cybton.com/.
Hier der Quelltext:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Titel</title>
<style type="text/css" media="all">
a:link { color: #810000; }
a:visited { color: #810000; }
a:hover { color: #ffe4b5; background-color: black; text-decoration: none; }
a:active, a:focus { color: #810000; background-color: transparent; }
img { border: none; }
a:hover img { border: 2px solid #000; background-color: none;}
</style>
</head>
<body>
<p>Lorem ipsum... Lorem ipsum <a href="blub/">Lorem ipsum</a>.</p>
<div><a href="bild.png"><img src="bild.png" alt="Alternativtext" /></a></div>
</body>
</html>
Beste Grüße
Reiner
-
Hi!
Leider funktioniert das nicht. Wie bekomme ich den Hover-Effekt bei den verlinkten Bildern weg?
a:link { color: #810000; }
a:visited { color: #810000; }
a:hover { color: #ffe4b5; background-color: black; text-decoration: none; }
a:active, a:focus { color: #810000; background-color: transparent; }
img { border: none; }
a:hover img { border: 2px solid #000; background-color: none;}Wieso gibst du für "`a:hover img`{:.language-css}" "`background-color:none;`{:.language-css}" an und nicht "`background-color:transparent;`{:.language-css}" wie noch zwei Zeilen zuvor?-
Wieso gibst du für "
a:hover img" "background-color:none;" an und nicht "background-color:transparent;" wie noch zwei Zeilen zuvor?Ups, bin wohl beim Ausprobieren durcheinandergekommen. Macht allerdings auch keinen Unterschied, wenn dort "
background-color:transparent;" steht - der schwarze Hintergrund wird beim Hover trotzdem angezeigt.--
Beste Grüße
Reiner
-
-
Hallo Reiner
Leider funktioniert das nicht.
Das kann auch nicht funktionieren, weil a:hover den Link anspricht, wärend
a:hover img das Bild selbst. Eine Möglichkeit einen Link anhand seines
Inhalts zu selektieren gibt es nicht.Wie bekomme ich den Hover-Effekt bei den verlinkten Bildern weg? (ohne jedem Bild eine eine eigene Klasse zuzuweisen)
Indem du z.B. dafür sorgst, dass der Link vollständig von Bild ausgefüllt
wird.Bei deinem Beispiel dürfte Folgendes funktionieren:
img { border: none; padding:2px; vertical-align:bottom;} a:hover img { border: 2px solid #000; padding:0;}Dabei dürfen keine Leerzeichen, Tabs oder Zeilenwechsel zwischen den Tags
stehen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!-
Vielen Dank! Mit folgender Anweisung habe ich mein Vorhaben hinbekommen:
img { border: none; vertical-align:bottom;}
a:hover img { padding:0;}Ich hatte leider in meiner Frage vergessen, die 2px Rand von meinen Versuchen zu entfernen.
--
Beste Grüße
Reiner-
Hallo Reiner
a:hover img { padding:0;}
Wenn du keinen Border beim hovern willst, kannst du dies auch noch weglassen.
Ich hatte leider in meiner Frage vergessen, die 2px Rand von meinen Versuchen zu entfernen.
Und ich hatte extra noch padding eingefügt, damit das Bild oder weitere
Seiteninhalte beim hovern nicht hopsen.Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin! -
Hello out there!
img {vertical-align:bottom;}
Auch ’ne Möglichkeit, dem Problem mit den Unterlängen zu begegnen. Allerdings: wenn die Zeilenhöhe beim Nutzer (abhängig von der Schriftgröße, auf die du sehr wenig Einfluss hast) größer ist als die Bildhöhe, siehst du die Hintergrundfarbe dann _über_ dem Bild. Die Lösung mit display: block ist wohl besser.
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Hallo Gunnar
Auch ’ne Möglichkeit, dem Problem mit den Unterlängen zu begegnen. Allerdings: wenn die Zeilenhöhe beim Nutzer (abhängig von der Schriftgröße, auf die du sehr wenig Einfluss hast) größer ist als die Bildhöhe, siehst du die Hintergrundfarbe dann _über_ dem Bild.
Wenn sehr kleine Bilder oder sehr große Schriften definiert sind, sonst
tritt dies erst bei extremen Schriftvergrößerungen seitens des
Seitenbesuchers auf, bei deren Einfluss aufs Design das dann wohl das
kleinere Problem sein dürfte.Die Lösung mit display: block ist wohl besser.
Nein, nicht besser.
Welche Variante die bessere ist, hängt vom gewünschten Layout ab.
Auf Wiederlesen
Detlef--
- Wissen ist gut
- Können ist besser
- aber das Beste und Interessanteste ist der Weg dahin!
-
-
-
-
Hello out there!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Was soll der Unfug, XHTML 1.1 zu verwenden zu wollen? Gründe dagegen sind über die Suche im Archiv reichlich nachzulesen.
a:hover img { border: 2px solid #000; background-color: none;}
Warum sollen die Bilder beim Hovern einen Rahmen bekommen, den sie sonst nicht haben? Der kommt ja zu ihrer Größe noch dazu, dadurch nehmen sie mehr Platz ein. (Änder mal den Wert von 2px auf 20px, um zu sehen, was ich meine.)
none ist kein gültiger Farbwert und wird folgerichtig ignoriert. (none als Wert der border-Eigenschaft bezieht sich auf border-style.)
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)-
Was soll der Unfug, XHTML 1.1 zu verwenden zu wollen? Gründe dagegen sind über die Suche im Archiv reichlich nachzulesen.
Ist mir neu, aber ich werde sie mir bei Gelegenheit mal durchlesen. Habe nur XHTML 1.1 gelernt, alles was älter ist kann ich nicht.
Ich habe den Farbwert nun auf transparent gesetzt und die 2px des Rahmens entfernt. Trotzdem wird unter der Grafik noch ein "Rahmen" angezeigt.
--
Beste Grüße
Reiner-
Hello out there!
Habe nur XHTML 1.1 gelernt, alles was älter ist kann ich nicht.
Wenn du nicht Ruby-Annotationen verwendest, bist du mit XHTML 1.0 Strict bestens bedient und musst auch nichts umlernen.
Ich habe den Farbwert nun auf transparent gesetzt und die 2px des Rahmens entfernt. Trotzdem wird unter der Grafik noch ein "Rahmen" angezeigt.
Weil das Bild auf der Grundlinie (der Textzeile!) steht und die Box noch Platz für die Unterlängen der Buchstaben (g, j, p, q, y) enthält.
a img {display: block}hilft.See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
-
-