CSS hover over image question

[mclayson]

Hi - and thanks in advance for any advice. Did a search and couldn't find the solution (or couldn't understand it!)

I want to hover over text and get a differnt text and background color. I have managed this. But linked images become opaque with the background color and I would like the image to be retained.

This is the code that I have as advised by my son but it is, of course, not right. Grateful for any help. Thanks.

a:hover {
text-decoration: underline; color: #ffffff; background: green;
}

a:hover img {
background: transparent;
}

[Setek]

I think it's best to understand the code to find the problem.

a:hover {
text-decoration: underline; color: #ffffff; background: green;
}

What you're doing here is setting a background color to all anchors when in a hovered state.

a:hover img {
background: transparent;
}

What you're doing here is, for all anchors in a hovered state that contain images, set the background color of the image to be transparent.

That won't work because the anchor that the image is wrapped in will still have the background color, as defined in the first rule.

Is there a way to fix it?
Yes, but it's not a very... optimised way. CSS is cascading style sheets, and there's only one way to cascade: down. You cannot ask a child to change something of the parent, only ask a parent to change something of the child.

So, in order to stop the anchor from having a background colour, you need to somehow separate it from those which you want a background color to appear. That is to say, for those with images inside them, make the anchor that wraps it not have a background color.

You will have to apply a class to every single anchor that has an image contained within, and have:

<a href="#" class="nobackground"><img src=" ... /></a>

So your CSS will be:

a:hover { text-decoration: underline;
color: #ffffff;
background: green; }

a.nobackground:hover { background: transparent; }

[mclayson]

Wow! Thank you so much for a comprehensive reply. Unfortunately the images are tokenized and I guess this makes it tricky to separate as you mentioned.

No worries, now I know of the problem I will simply choose another style. Thank you for your expert help.

[Setek]

Happy to help :) Anything to avoid doing work...

*grins*

[penders]

...But linked images become opaque with the background color and I would like the image to be retained.

a:hover img {
background: transparent;
}

May be I'm missing something, but I'm not sure why the image will become opaque in this instance - if you have a regular/solid (ie. no transparent areas) image in your IMG tag?

Setting the background of an IMG whether its within an anchor or not will have no effect if there is an image to display (and there are no transparent areas in the image).

Setting the background of an anchor that contains an image will again have no effect (as long as there are no transparent areas in the image itself) - you won't see it - assuming that IMG margins / anchor padding are zero.

Unfortunately the images are tokenized...

What do you mean by 'tokenized'?