Kein Hoover-Efekt bei verlinkten Bildern

[Tobi]

Hallo!

Ich schaffe es nicht, dass der Hoover-Effekt bzw. der Unterstrich des Links nur bei dem Text, nicht aber unter einem Bild angezeigt wird.

<a href="beispiel-lied.mp3"><img src="beispiel-bild.jpg" width="30" height="30" alt="Beispiel Bild" /><br />Runterladen (1,00 MB)</a>

Mit diesen css-Eigenschaften funktioniert es leider nicht:

a:hover img
{
background-image:none;
background-color:transparent;
text-decoration:none;
}

Was habe ich falsch gemacht und wie bekomme ich es zumlaufen?

Gruß
Tobi

[Thomas Luethi]

Hallo,

Ich schaffe es nicht, dass der Hoover-Effekt bzw. der Unterstrich des Links nur bei dem Text, nicht aber unter einem Bild angezeigt wird.

Probier mal:

border:0;
line-height:...

Gruesse,

Thomas

[Tobi]

Das hilft leider auch nicht weiter. Der Unterstrich wird immer noch unter dem Bild angezeigt.

[Elya]

Hallo Tobi,

<a href="beispiel-lied.mp3"><img src="beispiel-bild.jpg" width="30" height="30" alt="Beispiel Bild" /><br />Runterladen (1,00 MB)</a>

Mit diesen css-Eigenschaften funktioniert es leider nicht:

a:hover img
{
background-image:none;
background-color:transparent;
text-decoration:none;
}

Was habe ich falsch gemacht und wie bekomme ich es zumlaufen?

Ich glaube nicht, daß Du etwas falsch gemacht hast. Der Effekt tritt auch nur im Mozilla auf, oder? Das attribut text-decoration gilt für das gesamte <a>-Element, und du kannst es für das <img> nicht abschalten, weil es das m.E. für dieses Element nicht gibt. Zwei Möglichkeiten sind mir eingefallen

1. Unschön wäre es, zwei <a href> mit einem <br /> für die beiden Elemente anzulegen.

2. Ein "Fake" für die text-decoration mittels border-bottom:1px solid #xyz; dazu mußt Du allerdings dem <a> noch display:block; und eine feste Breite mitgeben. Nachteil: Alle Links sind gleich breit, es sei denn, Du weist noch zusätzlich Klassen mit unterschiedlichen Breiten zu.

3. Setze das Bild als Hintergrundbild für <a> ein und gebe dem Element <a> per css entsprechende padding-Angaben. Habe ich nicht ausprobiert, müßte aber mit ein wenig Gefrickel klappen. Nachteil: Entweder für alle <a>-Elemente das gleiche Hintergrundbild, oder wieder Unterscheidung mit class. Vorteil: weniger Code im html-Teil, übersichtlichere Struktur

Sonst fällt mir dazu leider auch grade nichts ein. Melde mal, ob/wenn Du noch eine Lösung findest!

Gruss aus Koeln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

Ich glaube nicht, daß Du etwas falsch gemacht hast. Der Effekt tritt auch nur im Mozilla auf, oder?

Doch - und der Effekt tritt in jedem Browser auf, der sich an den Standard hält, und für inline-angezeigte Bilder eine Unterlänge reserviert.
ASbhilfe ist entweder vertical-align oder display:block, sofern die inline-Eigenschaft nicht erforderlich ist (dann sieht der Atl-Text bei nichtangezeigtem Bild im Opera vernünftiger aus).

freundliche Grüße
Ingo

[Tobi]

ASbhilfe ist [.. ] display:block

So kann man den Unterstrich tatsächlich entfernen. Allerdings "geht der Link dann über die ganze Seite", d.h., wenn ich rechts neben das Bild klicke, wird der Link ebenfalls geöffnet. Wie kann man diese Eigenschaft noch entfernen?

[Elya]

Hallo Tobi,

ASbhilfe ist [.. ] display:block

So kann man den Unterstrich tatsächlich entfernen. Allerdings "geht der Link dann über die ganze Seite", d.h., wenn ich rechts neben das Bild klicke, wird der Link ebenfalls geöffnet. Wie kann man diese Eigenschaft noch entfernen?

das meinte ich mit "fester Breite" - du mußt width: definieren für das Element, sonst geht das block-Element über die volle Breite.

In meinem Firebird war das Problem mit display:block; noch nicht gelöst...

Gruss aus Koeln-Ehrenfeld,

Elya

[Ingo Turski]

Hi,

ASbhilfe ist [.. ] display:block

Wie kann man diese Eigenschaft noch entfernen?

Das stand genau dort, wo Du mein Zitat gekürzt hast..;-)

freundliche Grüße
Ingo