HTML: Entfernen Sie ein: Hover für Bilder?

StackOverflow https://stackoverflow.com/questions/1030544

Frage

Text Links, die ich habe:

CSS: 

a:link {color: #3366a9; text-decoration: none}
a:hover {border-bottom: 1px solid; color: black}

Aber das fügt auch eine schwarz unterstrichen auf verknüpfbar IMGs , dass ich nicht will.

Wie entferne ich die border-bottom auf verknüpfbaren IMGs schwebte, wenn CSS?

Ich habe versucht, die folgenden: 

a:hover img {border-bottom: 0px}

Aber das funktioniert nicht

Live-Beispiel (versuchen Sie über das Logo in oben zu schweben -left)

War es hilfreich?

Lösung

Wenn Sie Ihre Bilder vs. Inline schweben dies funktionieren wird und keine Änderungen erforderlich, um Bildlink-Attribute, die Steve Antwort erfordert. 

a:hover img {
border: none !important;
display: block;
}

Andere Tipps

a:hover img {border-bottom: 0px;}

Das sollte den Trick tun.

Nicht sicher, ob dies die beste Lösung ist, aber es funktioniert: 

    a:link {color: #3366a9; text-decoration: none}
    a:hover {border-bottom: 1px solid black; }

    .aimg:link {color: #3366a9; text-decoration: none}      
    .aimg:hover { border-bottom: none; }

Setzen Sie dann die Anker mit Bildern in ihnen zum „AlMg“ Klasse: 

<a class="aimg" href="Test.htm"><img src="images/myimage.gif" /></a>

Dies ist für mich auch im Internet Explorer. IE angezeigt, die Grenzen, aber mit dieser es nicht mehr. 

a img {/*whatever you need*/
border: none !important;
}
a img:hover{/*whatever you need*/
}

Wir haben dieses Beispiel hier: https://perishablepress.com/ CSS-remove-Link-Unterstreichungen-Grenzen-linked-images / 

a[href$=jpg], a[href$=jpeg], a[href$=jpe], a[href$=png], a[href$=gif] {
    text-decoration: none;
    border: 0 none;
    }

Das ist genau das, was Sie wollen nehme ich an.
Funktioniert perfekt in Firefox, entfernt alle Effekte aus der Verbindung, die ein Bild von bestimmten Formaten enthält.

Ich habe jQuery eine "no-schweben" Klasse alle a-Tags hinzufügen, die ein Bild enthalten: 

$('a > img').each(function() {
  $(this).parent().addClass('no-hover');
});

Und in CSS Ich tat dies: 

a.no-hover:hover {
  border-bottom: 0px
}

Wenn jQuery für Sie zu schwer ist, können Sie picoQuery . Es ist nur 1k, wenn Sie nur die .each () -Methode wählen.

Haben Sie versucht, a img {border:none}?

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top