Remplacer ancre> Comportement image avec CSS

Question

Remarque: J'ai posé une question similaire il y a 5 minutes, mais ce n'est pas le même ...

Je possède ce CSS règle pour souligner les liens sans frapper par l'une des « les foots » de la lettre:

a:hover, a:focus, a:active { 
    color: #3b234a; 
    border-bottom: 1px #ccc solid; 
} 

maintenant, cela fonctionne comme prévu, mais je veux écrire une règle qui désactivent ce comportement sur les images liées comme celui-ci:

<a href="#"><img src="..." /></a> 

Est-ce possible?

Merci.

Answer 1

Ajouter une classe « Imagelink » ou ce que vous aimez à des ancres qui maintiennent des images alors:

a:hover, a:focus, a:active { 
    color: #3b234a; 
    border-bottom: 1px #ccc solid; 
} 

a.imageLink:hover, a.imageLink:focus, a.imageLink:active { 
    border-bottom: none; 
} 

Answer 2

Essayez

a:hover img { border-bottom: none; } 

Answer 3

Appliquer une classe à votre href et enlever la frontière sur cette classe.

Fondamentalement, vous allez toujours venir à cela avec l'élément parent à l'esprit parce que c'est la direction que le CSS est analysé dans.

Vous pouvez déplacer vers l'arrière de l'enfant au parent si vous utilisez jQuery ou similaire, mais vanilla CSS ne peut pas gérer ce que vous voulez qu'il fasse dans cette situation.