Ignoring hover style in inside image

Question

I want the style to apply on the "a" elements, and not the img. Here's an example:

a:hover {background: #555;}

I tried to do something like this:

a:hover img {background: none;}

though I knew it's not going to do anything.

The solution I found in this question didn't work for me, because the "display: none" is moving the image when hovering.

Answer 1

The img is inside the anchor, so wouldn't the background be outside the image no matter the background in the image element. Does the image have padding, margin or transparency?

Answer 2

I'm not sure what you're asking here.

If you put a background colour on an A tag that surrounds an image you'll never see the background because the image covers it up.

If you want to display the background colour and hide image when you mouse-over you can do it like this (insert your own image dimensions, filename etc.):

a {
   display:block;
   height:100px;
   width:100px;
   background-image:url(Images/sample.gif);
   background-color:#555
}

a:hover {
  background-image:none;
}

Answer 3

a:hover img { background:none }

means that when someone hovers over the A your IMG is in, the IMG background will be set to none--which means it will show your A's background, since it contains the IMG. (IMG is clear, A has background, but IMG is within or 'on top of' A; therefore, we see A's background). If your image is transparent in parts, A's background will show through.

The best solution may be

a {background:#555;}
/* set image to the background color of the layer you want to get back to */
a:hover img { background:#fff; }

Answer 4

The background isn't inherited by the image inside the link. Removing the background from the image doesn't do anything as it doesn't have any to start with.

If you are trying to "punch a hole" in the background where the image is, that is not possible. You would have to put other elements inside the link to fill up the space that is not occupied by the image, and set the background on those elements instead.