CSS-Zieltext-Links mit unteren Rand auf Hover, aber Bild-Links ohne Rahmen

Question

Ich möchte in der Lage sein, Textlinks in CSS mit Grenze-unten auf Hover, Ziel haben aber alle Links, die Bilder nicht haben eine Grenze beim Schweben. Also:

<a href="#"><img src="image.png" /></a> ==> this should not have a bottom-border on hover 
<a href="#">regular text link</a> ==> this should have a bottom-border on hover 

ich diese CSS versucht:

#sidebar a:hover { 
    border-bottom: 1px dotted red; 
} 
#sidebar a:hover img { 
    border-bottom: none; 
} 

Aber das funktioniert nicht ... der Anker ausgerichtet werden muss, anstatt das Bild, glaube ich. Ich habe bei Google gejagt und niemand scheint zu wissen, wie das geht, außer indem ich den Image-Link auf eine bestimmte Klasse oder ID lenke oder display: block verwende.

Aber ich kann diese Lösungen nicht verwenden, da der Inhalt in einem CMS ist, also möchte ich nicht, dass der Benutzer jedem Bild, das er einfügt, eine Klasse zuweisen muss. Und display: block funktioniert nicht, weil ich nicht weiß, ob das für jedes Bild geeignet wäre, das der Benutzer anzeigen möchte.

Schließlich möchte ich in der Lage sein, dies im einfachen CSS (kein Javascript) zu tun. Vielleicht gibt es keinen Weg ... aber jede Hilfe oder Ideen, die Sie haben, würden sehr geschätzt werden!

Answer 1

Sorry, was man will, ist eine Art von: Eltern pseudo-Klasse, die das Kind wählt, sondern gilt auch für die Eltern, die leider nicht (auch nicht in CSS3) nicht existiert.

Du müsstest ein wenig Javascript tun, um alle Elemente der Auswahl #sidebar eine passende: schweben, dann die rote untere Grenze der Bedingung der Anwendung, dass sie kein Kind IMG-Element haben.

Answer 2

Dies ist mit reinem CSS nicht möglich, ohne neue Tags hinzuzufügen. Um dies mit reinem CSS/HTML zu tun, müssen Sie entweder dem Link [a href] des Bildes einen Tag hinzufügen oder den [a hrer] Links, die Sie mit einem Unterstrich anzeigen möchten, ein Tag hinzufügen.

Sie könnten ein kleines Stück Code in JavaScript schreiben, das die Eigenschaft border eines Elements bei Hover relativ leicht ändern würde. Sie müssten nur überprüfen, ob das Element ein IMG ist.

Answer 3

Das scheint tatsächlich ein ziemlich schwieriges Problem zu sein. Haben Sie die Möglichkeit, den CMS-Code zu ändern? Es wird einfach, wenn Sie etwas wie einen <span> um jeden Text innerhalb von Links wickeln können (und Bilder außerhalb dieser bleiben lassen). Alles, was Sie tun müssen, ist das Ziel #sidebar a:hover span, um die Grenze zu haben.

Wenn Sie den Code nicht ändern können, bin ich nicht sicher, ob dies möglich ist. Ich kann mir sicher nichts einfallen lassen.

Answer 4

Sie können ein Element nicht abhängig davon ansprechen, welche untergeordneten Elemente es hat. Daher müssten Sie dem Code etwas hinzufügen, um auf die verschiedenen Links zu verweisen.

Können Sie nicht unterstreichen statt einer unteren Grenze verwenden? Dies würde funktionieren, da es auf den Text in der Verknüpfung und nicht auf das Verknüpfungselement selbst angewendet wird.

#sidebar a:hover { text-decoration: underline; } 
#sidebar a:hover img { text-decoration: none; } 

Answer 5

Dies könnte

a img {position:relative; top: Npx}, where N is the hover border thickness 

arbeitet Dies würde die Grenze des Bild bedecken, obwohl es nach unten ein Pixel verschoben werden würde oder so dauerhaft.

Answer 6

Versuchen Sie diesen Trick. Es klappt.

a { text-decoration:none; border-bottom:2px solid; } 

a img { border:none; vertical-align:top; } 

Ein anderer Weg - PHP:

$text = preg_replace('#<a(.*?)<img(.*?)/>(.*?)</a>#is', "<a class='imgshow' \\1 <img\\2 />\\3</a>", $text); 

Answer 7

Soweit JavaScript geht, würde ich mit jQuery vorschlagen, eine Klasse zu allen Links hinzufügen, die ein Bild enthalten:

$('#sidebar a:has(img)').addClass('image-link'); 

(Der Selektor :has ist eine jQuery-Sache; er ist in CSS nicht vorhanden.)

Passen Sie dann Ihr Stylesheet entsprechend an.

Answer 8

Es ist möglich mit css3 mit a:not(img) a:hover {style:whatever;}, aber es gibt Überlegungen. Hier ist eine Erklärung mit Bildern: http://nerdinprogress.blogspot.com/2010/11/target-text-links-but-not-images-with.html

Answer 9

Der einfache Weg ist

:hover (text-decoration: underline} 

Auch

text-underline-position 

http://dev.w3.org/csswg/css3-text/#text-underline-position0