CSS: a:hover img no background?

Question

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, as intended. But when you hover over the image, it also does. It's supposed not to have a hover background.

Solution 1

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

Solution 2

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/

Comments

[MrB]

Sorry, no. I just want the image to have no mouseover-background, like I want the links to have.

[MrB]

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

[MrB]

That's what I typed, but it isn't working. Image still has a background on hover.

[andyb]

background-color:transparent is only partially implemented in IE6 so this solution will not work for that browser.

[netbrain]

IE6 is, as far as i am concerned. dead and buried.

[andyb]

@netbrain you may think that, but it is naïve to assume that the OP does not want a solution that works in IE6. It doesn't sound like you worked for a company that still needs IE6 support and either relies on it for corporate applications or in dropping support for it would lose millions of potential sales/customers. Unfortunately this is still the case for many organisations. I dislike IE6 as much as anyone but you have to be pragmatic about which features will be hacked in or worked around in IE6 and which can be implemented as progressive enhancement.

[netbrain]

You are quite wrong in your assumption that i have not worked in a company that still needs IE6. But i believe that we as web developers need to force the use of newer browsers. And dont build in support for old browsers that doesn't even follow the web standards. It is in my opinion the only way to make sure that the web development plattform keeps moving forward! my 5 cents..

[thirtydot]

@andyb: It's sensible (in this day and age) to assume that IE6 support is not required unless it's explicitly asked for in the question. Maybe add a note if it will go horribly wrong in IE6. More to the point, the background-color: transparent will (I guess) work in IE6 in this case. It's the a:hover img selector that definitely won't.

[andyb]

@thirtydot: yes, I agree. I do try and add a note if things will not work in particular browsers which is the point I was trying to get across in my original comment. As it currently exists this jsFiddle does not work in IE6 but does work in IE7+

[thirtydot]

@andyb: It turns out I was a little wrong in my reasoning (of why it wasn't working). This works in IE6. Make of it what you will: fiddle.jshell.net/kp4ZK/show/light

[MrB]

Close. The 'click me' text and the img-tag are not in the same a-tag. I want text in a-tags to have a:hover-background-color, but not img-tags in a-tags.

[Mushimo]

@MrB In that case, add a class attribute to the <a> tags that wrap an image so you can select them specifically, e.g. <a class="clickableimage" href="#"><img src="logo2.png"></a>. If you can't change the html then try javascript $('a img').parent(). Then you can write in your style sheet a[class^='clickableimage']:hover { background-color:red; } or something...

[Mushimo]

I made a mistake in prev comment. I meant to say: if you can't change the html then try $('a img').parent() in javascript to find the <a> tags that wrap an image, then add the class name programatically. Finally you can write in your style sheet a:not(.clickableimage):hover { background-color:red; } to specifically target just the <a> without image.

[NullPoiиteя]

you are supposed to describe your answer ..only giving the link or code is not a good technique