Hover-Effekte bei Bildern unterdrücken

[Markus Thomas]

Hallo,

ich habe das Problem, dass alle aktuellen Browser bei meiner Website bei jedem verlinkten Bild selbiges mit den entsprechenden a-Element-Formatierungen (zu Recht) versehen. Ich habe hier eine Testseite eingerichtet: http://selftest.se.funpic.de/

Leider schaffe ich es nicht, die Formatierungen für verlinkte Bilder zu deaktvieren.

[Malcolm Beck´s]

hi,

Leider schaffe ich es nicht, die Formatierungen für verlinkte Bilder zu deaktvieren.

Da musst du auf Klassen zurückgreifen, also den a-Elementen, die ein Bild enthalten, eine Klasse zuweisen und dieses formatieren.

Mit CSS kannst du über die Kinder eines Elementes die Eltern nicht ändern.

mfg

[Markus Thomas]

Hallo,

Da musst du auf Klassen zurückgreifen, also den a-Elementen, die ein Bild enthalten, eine Klasse zuweisen und dieses formatieren.

das habe ich gemacht:

.no_hover { text-decoration: none; background: transparent !important; }

und dann beim Bild:

<a href="#" class="no_hover"><img src="button.png" alt="" border="0"></a>

Es funktioniert! Aber ist das wirklich der eleganteste Weg?

Danke, Markus

[Detlef G.]

Hallo Markus

.no_hover { text-decoration: none; background: transparent !important; }

Als KLassenbezeichner würde ich nicht „no_hover” verwenden, sondern das aussagen, was es ist, z.B. „bildlink” oder „imagelink”, oder noch eine andere Bezeichnung, wenn sich die Links mit Bild noch treffender klassifizieren lassen. Falls du später eventuell auch diese Links hovern willst (mit ganz anderen Eigenschaften) wäre „no_hover” sehr unpassend, oder du müsstest das HTML wieder ändern. Für einen Link mit Bild würde „imagelink” wohl immer passen, egal wie er dann formatiert wird.

Auch verwende ich !important erst dann, wenn es keine andere praktikable Möglichkeit mehr gibt, die Spezifität zu erhöhen. In deinem Fall wäre a.no_hover bereits ausreichend, wenn die Regel nach den allgemeinen Linkregeln im Stylesheet steht oder body a.no_hover an beliebiger Stelle (Statt body auch jedes andere Vorfahrenelement).

Es funktioniert! Aber ist das wirklich der eleganteste Weg?

Nein, der eleganteste nicht, ob es andere Möglichkeiten gibt, hängt (wie bereits geschrieben) von deinem Seitenaufbau ab.
Wenn z.B. deine Navigation grafischen Links verwendet und keine Textlinks, dann könnte ohne extra Klassen für die Links z.B. .navi a als Selektor verwendet werden. Oder wenn sich alle Textlinks in Absätzen befinden, dort aber keine grafischen Links, dann könnte für diese p a:focus, p a:hover usw. verwendet werden.

Auf Wiederlesen
Detlef

[Detlef G.]

Hallo Markus

Leider schaffe ich es nicht, die Formatierungen für verlinkte Bilder zu deaktvieren.

Wie Malcolm dir bereits schrieb, geht das nicht, du kannst Elemente nicht danach formatieren, welche Nachkommen sie erhalten.

Wenn Text- und Grafiklinks bunt gemischt auf deiner Seite vorkommen, wird dir auch nichts anderes übrig bleiben, als entweder den Text- oder den Grafiklinks eine Klasse zuzuweisen um sie unterschiedlich zu formatieren.
Wenn sich die Grafiklinks aber in Elementen befinden, die keine Textlinks enthalten, dann kannst du auch den Nachfahrenselektor verwenden.

Auf Wiederlesen
Detlef