[Erledigt] Kein Hover auf Bildlinks

Der_Seb · 31.10.2010, 20:32

Auf meiner Website habe ich Links auf Bildern, z.B.:

Code:

<a href="http://validator.w3.org/check?uri=referer" target="_blank">
  <img src="/img/html_valid.png" alt="" style="vertical-align: middle;">
</a>

Wenn ich in meinem Stylesheet für a:hover folgendes angebe:

Code:

a:hover {
  color: #031b68;
  background-color: #bfcdfd;
  text-decoration: none;
}

...werden verständlicherweise auch Links auf Bildern mit der Hintergrundfarbe beim Hover versehen (gut zu sehen bei teilweise transparenten Bildern). Bei eben diesen transparenten Bildern würde mich das nicht stören - leider wird aber auch unter dem Bild eine schmale Leiste in der Hintergrundfarbe angezeigt.

Ein ähnlicher Effekt entsteht, wenn man für a:hover "text-decoration: underline;" definiert. Dann werden Bilder unterstrichen, wenn sie ein Link sind und man mit der Maus herüberfährt.

Wie kann ich das a:hover-Verhalten bei Links auf Bildern unterdrücken?

Ich habe schon Folgendes ausprobiert, und es funktionierte nicht:

Code:

a:hover img {
  background-color: #fff;
}

Also einfach eine andere Hintergrundfarbe - ist aber auch klar, dass das nicht funktioniert, weil die Hintergrundfarbe ja nicht von dem Bild ist, sondern von dem Link (a).

Jemand eine Idee?? Danke :)

ChrisB · 31.10.2010, 20:43

CSS kann nicht „abwärts“ selektieren. Deshalb bleibt dir also nur, Links mit Bildern drin mit einer eigenen Klasse zu versehen o.ä., wenn du sie gesondert ansprechen willst.

(Die schmale Linie unter dem Bild bekommst du natürlich auch weg, in dem du die vertikale Ausrichtung des Bildes änderst - wenn dir das reicht.)

Der_Seb · 31.10.2010, 21:25

Das heißt, ich müsste alle Links mit Bilder mit einer Klasse versehen und dafür den hover-Effekt angeben? Wie umständlich...

Welches vertical-align muss mein Bild denn haben (middle?)?
-- edit: ja, "vertical-align: middle;", dann geht's.

Die Unterstreichung bekomme ich aber nicht mit so einem Trick weg, oder?

Dark Guardian · 31.10.2010, 22:33

Schon "a img:hover" als Selektor probiert?

ChrisB · 31.10.2010, 22:48

Zitat:

Zitat von Dark Guardian

Schon "a img:hover" als Selektor probiert?

Bewirkt nichts für Formartierungen, die zum A-Element gehören.

Dark Guardian · 01.11.2010, 05:15

Zitat:

Zitat von ChrisB

Bewirkt nichts für Formartierungen, die zum A-Element gehören.

Naja, zumindest bei der Hintergrundfarbe funktioniert es. Das beschriebene ähnliche Phänomen mit text-decoration: underline konnte ich spontan nicht reproduzieren und somit testen ob das auch funktionieren würde. Ich gehe aber mal davon aus da die img:hover Werte die vom a:hover überschreiben beim mouseover auf das Bild.

pfump · 01.11.2010, 09:28

Wenn die Bild-Links in einer eigenen Klasse sind,
kann man text-decoration doch ganz einfach ändern.

eagle275 · 01.11.2010, 09:41

tja pfump das is ihm aber noch a weng' viel arbeit ^^

pfump · 01.11.2010, 09:49

Der ist gar nicht mal schlecht

Der_Seb · 01.11.2010, 23:38

Zitat:

Zitat von Dark Guardian

Naja, zumindest bei der Hintergrundfarbe funktioniert es. Das beschriebene ähnliche Phänomen mit text-decoration: underline konnte ich spontan nicht reproduzieren und somit testen ob das auch funktionieren würde. Ich gehe aber mal davon aus da die img:hover Werte die vom a:hover überschreiben beim mouseover auf das Bild.

Nein - es funktioniert nicht: wie du im Beispiel unten siehst. Das einzige, das funktioniert, ist vertical-align: middle; anzugeben.

Ich habe mich aber auch vertan - ich meinte nicht, text-decoration: underline;, sondern eine schöne border beim Hovern. Hier mal ein Beispieldokument zu dem ganzen: http://sebastianlukas.square7.net/li...r-example.html - und hier der Quellcode:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Links und Hover</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
      a:link, a:visited, a:active {
        text-decoration: none;
        color: blue;
      }
      a:hover {
        text-decoration: none;
        color: blue;
        border-bottom: 1px dotted blue;
        background-color: yellow;
      }
      a img:hover {
        border-bottom: 0px dotted blue;
        background-color: white;
      }
    </style>
  </head>
  <body>
    <p>
      <a href="#">Testlink</a>
    </p>
    <h2>Dieses Bild hat kein <i>vertical-align</i>:</h2>
    <p>
      <a href="#">
        <img src="http://www.php.de/php_logo.jpg" alt="Bildlink" style="border-width: 0px;">
      </a>
    </p>
    <h2>Dieses Bild hat <i>vertical-align: middle</i>:</h2>
    <p>
      <a href="#">
        <img src="http://www.php.de/php_logo.jpg" alt="Bildlink" style="border-width: 0px; vertical-align: middle;">
      </a>
    </p>
  </body>
</html>

Merkwürdigerweise verschwindet sowohl der Hintergrund als auch die Border beim Hover, sobald man vertical-align: middle; angibt.

Wie auch immer - da ich das jetzt herausgefunden habe, bin ich erstmal zufrieden.

Danke für eure Hilfe!

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
[Erledigt] dynamischen signatur zeigt fehler "grafik kann nicht angezeigt werden" an	steive	PHP Tipps 2009	33	12.11.2009 11:31
[Erledigt] Hover Div bei Mausposition	skiddo	JavaScript, Ajax und mehr	2	11.10.2009 16:57
CSS Slide-Menu verändern	K3HLIM	JavaScript, Ajax und mehr	1	21.04.2009 21:10
[Erledigt] aktiven link im zustand von hover anzeigen?	litterauspirna	HTML, Usability und Barrierefreiheit	18	01.11.2008 13:29
Hover nicht nebeneinander	wers1	HTML, Usability und Barrierefreiheit	11	18.08.2008 07:23
JS: Spezieller Image Hover	GSJLink	HTML, Usability und Barrierefreiheit	7	18.06.2007 17:24
CSS Hover	JanM	HTML, Usability und Barrierefreiheit	3	27.06.2006 21:13
IE interpretiert :hover nicht	scooter	HTML, Usability und Barrierefreiheit	2	29.03.2006 12:04
CSS Hover bei Bildern im IE	juhuwoorps	HTML, Usability und Barrierefreiheit	12	01.03.2006 20:28
CSS / JS: mehrere divs bei hover auf visible schalten ?	Cytrix	HTML, Usability und Barrierefreiheit	3	04.01.2006 11:33
image map mit hover		HTML, Usability und Barrierefreiheit	1	21.12.2005 16:04
[Erledigt] Bild mit clip:rect verkleinern und per hover wieder normal		HTML, Usability und Barrierefreiheit	3	21.12.2005 14:54
Hover Effekt für Textfelder?	Masteroi	HTML, Usability und Barrierefreiheit	3	27.07.2005 14:36
farbe von tabellenzeile verändern bei hover		HTML, Usability und Barrierefreiheit	4	04.07.2005 09:40
[CSS] Table und :hover ???		HTML, Usability und Barrierefreiheit	16	21.01.2005 15:17

31.10.2010, 20:32
Der_Seb Neuer Benutzer Registriert seit: 03.03.2010 Beiträge: 28 PHP-Kenntnisse: Fortgeschritten	[Erledigt] Kein Hover auf Bildlinks Auf meiner Website habe ich Links auf Bildern, z.B.: Code: <a href="http://validator.w3.org/check?uri=referer" target="_blank"> <img src="/img/html_valid.png" alt="" style="vertical-align: middle;"> </a> Wenn ich in meinem Stylesheet für a:hover folgendes angebe: Code: a:hover { color: #031b68; background-color: #bfcdfd; text-decoration: none; } ...werden verständlicherweise auch Links auf Bildern mit der Hintergrundfarbe beim Hover versehen (gut zu sehen bei teilweise transparenten Bildern). Bei eben diesen transparenten Bildern würde mich das nicht stören - leider wird aber auch unter dem Bild eine schmale Leiste in der Hintergrundfarbe angezeigt. Ein ähnlicher Effekt entsteht, wenn man für a:hover "text-decoration: underline;" definiert. Dann werden Bilder unterstrichen, wenn sie ein Link sind und man mit der Maus herüberfährt. Wie kann ich das a:hover-Verhalten bei Links auf Bildern unterdrücken? Ich habe schon Folgendes ausprobiert, und es funktionierte nicht: Code: a:hover img { background-color: #fff; } Also einfach eine andere Hintergrundfarbe - ist aber auch klar, dass das nicht funktioniert, weil die Hintergrundfarbe ja nicht von dem Bild ist, sondern von dem Link (a). Jemand eine Idee?? Danke :)


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

31.10.2010, 20:43
ChrisB Moderator¹ Registriert seit: 28.03.2010 Beiträge: 7.470 PHP-Kenntnisse: Fortgeschritten	CSS kann nicht „abwärts“ selektieren. Deshalb bleibt dir also nur, Links mit Bildern drin mit einer eigenen Klasse zu versehen o.ä., wenn du sie gesondert ansprechen willst. (Die schmale Linie unter dem Bild bekommst du natürlich auch weg, in dem du die vertikale Ausrichtung des Bildes änderst - wenn dir das reicht.) __________________ RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?

31.10.2010, 21:25
Der_Seb Neuer Benutzer Registriert seit: 03.03.2010 Beiträge: 28 PHP-Kenntnisse: Fortgeschritten	Das heißt, ich müsste alle Links mit Bilder mit einer Klasse versehen und dafür den hover-Effekt angeben? Wie umständlich... Welches vertical-align muss mein Bild denn haben (middle?)? -- edit: ja, "vertical-align: middle;", dann geht's. Die Unterstreichung bekomme ich aber nicht mit so einem Trick weg, oder? Geändert von Der_Seb (31.10.2010 um 21:30 Uhr). Grund: Was herausgefunden.

31.10.2010, 22:33
Dark Guardian Erfahrener Benutzer Registriert seit: 10.10.2009 Beiträge: 2.630 PHP-Kenntnisse: Fortgeschritten	Schon "a img:hover" als Selektor probiert? __________________ "Alles im Universum funktioniert, wenn du nur weißt wie du es anwenden musst".

01.11.2010, 09:28
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	Wenn die Bild-Links in einer eigenen Klasse sind, kann man text-decoration doch ganz einfach ändern.

01.11.2010, 09:41
eagle275 Erfahrener Benutzer Registriert seit: 01.09.2010 Beiträge: 4.561 PHP-Kenntnisse: Fortgeschritten	tja pfump das is ihm aber noch a weng' viel arbeit ^^ __________________ "Irren ist männlich", sprach der Igel und stieg von der Drahtbürste

01.11.2010, 09:49
pfump Erfahrener Benutzer Registriert seit: 29.03.2008 Beiträge: 576	Der ist gar nicht mal schlecht