liens a:hover avec fond et images sans fond, un ex de a[href$=jpeg]

Si on fait   a:hover { background: SomeColor } cela s'applique aussi à une image avec HTML  <a ...><img src="..." /></a>

Ajouter  a:hover img { background-color: #fff; } ne peux pas fonctionner (cf https://perishablepress.com/css-remove-link-underlines-borders-linked-images/)

1ere solution (couteuse sur gros site)

consiste à ajouter une classe aux images qui ont un lien

a.image-border {
	text-decoration: none;
	border: 0 none;
	}

2e solution CSS 3

avec le match de pattern et attribut sélecteur, par ex:

a[rel="nofollow"] { background: yellow;	}
img[alt="arrow"] { border: green; }
pre[class="perl"] { color: red; }

Un ex avec ajout du match pattern serait :  a[href$=png] { text-decoration: none; border: 0 none; }
rappel: element[attribute$="value"] pour la valeur de l'attribut se termine par "value"

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

Inconvénients:

• si les images ont un lien qui ne référence pas l'extension (lien vers audio ou vidéo, URL dossier...), elles n'auront pas ce style
• liens sur du texte qui pointent vers les extensions spécifiées.
  En d'autres tremes, cette solution ne permet pas de distinguer les liens appliqués sur du texte (<a>txt</a>) des liens sur les images (<a ...><img/></a>). Tous les liens texte qui pointent vers des images recevront ce style.

Ex de sel de liens qui pointent vers une URL :   a[href*=domain-or-directory] { text-decoration: none; border: 0 none; }

Penser au cas  "<a><span>txt</span> et <img></a>"

<a href="..."><img src="so.jpg"></a>
<a href="..."><span class="text">some text</span></a>
<a href="..."><span class="text">some text</span> and <img src="so.jpg"></a>

a .text { padding: 1em; }
a:hover .text {background-color:#ff0}