HTML: supprimer un: survol pour les images?

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

Question

Pour les liens texte , j'ai:

CSS: 

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

Mais cela ajoute également un soulignement noir sur les IMG pouvant être couplés que je ne souhaite pas.

Comment puis-je supprimer le fond de bordure sur les IMG pouvant être liés lorsque je survole avec CSS?

J'ai essayé les solutions suivantes: 

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

Mais ça ne marche pas

Exemple en direct (essayez de survoler le logo en haut -left)

Était-ce utile?

La solution

Si vous faites flotter vos images par rapport à celles en ligne, cela fonctionnera et ne nécessitera aucune modification des attributs de lien aux images exigés par la réponse de Steve. 

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

Autres conseils

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

Cela devrait faire l'affaire.

Je ne suis pas sûr que ce soit la meilleure solution, mais cela fonctionne: 

    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; }

Ensuite, définissez les ancres contenant des images sur "aimg". classe: 

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

Cela a fonctionné pour moi aussi dans IE. IE a affiché les frontières mais avec cela, ce n’est plus le cas. 

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

Cet exemple a été trouvé ici: https://perishablepress.com/ css-remove-link-underlines-border-linked-images / 

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

C’est exactement ce que vous voulez, je suppose.
Fonctionne parfaitement dans Firefox, supprime tous les effets du lien, qui contient une image de formats donnés.

J'ai utilisé jQuery pour ajouter un "no-hover". classe à toutes les balises contenant une image: 

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

Et en CSS, j'ai fait ceci: 

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

Si jQuery est trop lourd pour vous, vous pouvez utiliser picoQuery . C'est juste 1k, si seulement vous choisissez la méthode .each ().

Avez-vous essayé une img {border: none} ?

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top