CSS: a:hover img no background?

I have a background color on my links (on hover, rails-style). And I have an img inside an a-tag that I don't want to have a background on hover.

I tried

a:hover img{ background-color: #fff; }

but that's not doing anything. How do I exclude img-tags inside a-tags from the hover?

Thx, MrB

edit: jsFiddle

http://jsfiddle.net/rasvf/1/

In the example: "google" has a red background on hover开发者_C百科, as intended. But when you hover over the image, it also does. It's supposed not to have a hover background.

if i understand you correctly, i think you are trying to do something like this:

a:hover img{ visibility: hidden; }

or

a:hover img{ display: none; }

EDIT

In that case you want:

a:hover img {background-color: transparent;}

Example posted on: http://jsfiddle.net/6qwJy/

It's hard to understand your example. Say I have this piece of HTML:

<a class="foo" href="#"><img src="bar.gif"/> Click me</a>

then with these style rules

a#foo:hover { background-color: blue; }
a#foo img { background-color: white; }

the image background color will always be white, also on hover.

If however you have background images on the element that contains your link and you want that to show behind the foreground image, then you can't do this. In that case you'll have to wrap the "Click me" text of the link in a span and write in your stylesheet:

a#foo:hover span { background-color: blue; }

Is this what you intended?

Ah! I did it. Easy. I just put the not-to-have-a-background-image in a different div and then did:

.otherdiv a:hover{ background-color: transparent; }

a img {
    vertical-align: bottom;
}

Ok, you won't believe me, but I had the same problem above and I resolved as follows:

I had something like this:

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

And in my CSS I had:

a:hover { text-decoration: underline; }

And, believe me, I just had to put the 'img' tag in the same line as the 'a' tag, like this:

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

And that was all!!!