How to avoid a:hover to act on img in CSS?

Question

Suppose I have the following selector:

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

And suppose I have the following HTML code:

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

What happens is that <img> gets red-background color on mouse hover.

Any ideas how to fix it?

Thanks, Boda Cydo!

Answer 1

Either be more specific about your a:hover selector

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

Or create another selector that blocks the background from being changed in the instances that you don't want it to

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

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

Answer 2

Since your image is opaque, most of the time just removing the border and padding is enough to hide the red from showing.

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

A negative margin there to negates the a padding

Answer 3

I'm curious how you're seeing the red background through a jpg. Nevertheless, this should do the trick.

a:hover img { 
  background:transparent; 
}