Comment éviter: hover d'agir sur img en CSS?

Question

Supposons que je le sélecteur suivant:

a  { padding: 1em; } 
a:hover { backgrond-color: #FF0000; } 

Et si j'ai le code HTML suivant:

<a href="http://stackoverflow.com"><img src="so.jpg"></a> 

Ce qui se passe est que <img> obtient la couleur rouge-fond sur le vol stationnaire de la souris.

Toute idée comment résoudre ce problème?

Merci, Boda Cydo!

Answer 1

Soit être plus précis sur votre sélecteur a:hover

.something a:hover { background-color: #ff000; } 

Ou créer un autre sélecteur qui bloque l'arrière-plan d'être changé dans les cas que vous ne voulez pas à

a.no-bg-change:hover { background: none !important; } 

<a href="http://stackoverflow.com" class="no-bg-change"><img src="so.jpg"></a> 

Answer 2

Depuis votre image est opaque, la plupart du temps juste la frontière et retirez le rembourrage est suffisant pour cacher le rouge de montrer.

a img { border: none; padding: 0; margin: -1em; } 

Une marge négative là pour nie le rembourrage

a

Answer 3

Je suis curieux de savoir comment vous voyez l'arrière-plan rouge à travers un jpg. Néanmoins, cela devrait faire l'affaire.

a:hover img { 
    background:transparent; 
} 

Answer 4

jQuery('a').hover(function(){ 
    jQuery(this).has('img').css('background', 'none'); 
}); 

Answer 5

Ok, vous ne me croirez pas, mais j'ai eu le même problème ci-dessus et je résolus comme suit:

j'avais quelque chose comme ceci:

<a href="#">
                <img src"path/to/image.gif">
</a>

Et dans mon CSS j'avais:

a:hover { text-decoration: underline; }

Et, croyez-moi, je devais juste mettre le tag « img » dans la même ligne que la « une » étiquette, comme ceci:

<a href="#"><img src="path/to/img.gif"></a>

Et ce fut tout !!!

Answer 6

C'est bizarre, vous dites faire a avec le fond, mais seulement s'il est l'image, de ne pas. Et si un lien a et un texte et une image? Simplifiez-le, dites juste exactement ce que vous voulez. Je suppose que vous pourriez faire ceci par exemple:

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