Parent Object has an opacity -- Child Object should not

[Jeremy_H]

I have a page with a dark patterned background and a list on this page with a white background and an opacity setting of 75%. Therefore, the list has the same background as the page, but lighter.

CSS Snippet
***************
ul{background:#fff;filter:alpha(opacity=75);moz-opacity:.75;opacity:.75}

HTML Snippet
***************
<ul>
<li><a href="/">A</a></li>
<li><a href="/">B</a></li>
<li><a href="/">C</a></li>
</ul>

What I'm trying to do is set a :hover effect to the links so when the mouse is over them, they will have a full white background--not just a lighter version of the page's background.

Therefore, I tried adding the following:

CSS Snippet
***************
#ul a:hover{background:#fff}

This doesn't seem to work. When I tried other background colors, what I get is a light version of the color over the background, but its still not fully saturated.

I've even tried playing around with the opacity setting of both the anchor and the list item, but to no avail.

Anybody catch what I'm doing wrong?

Thanks

[DrDoc]

You can't make a parent have opacity without its children having opacity as well. You are saying "give element X opacity". Well, "element X" includes it's children, since they are effectively part of it.

I'm trying to find an equivalent comparison ... Imagine a bucket of paint. Also imagine that we could apply opacity to real-world objects. What you are asking is like asking the bucket to be transparent so that you can look through it, but with the paint still being unaffected.

[Setek]

AFAIK, opacity: 1.0; is supposed to fix this. However, supposed to and does are two different things.

You might want to have a read of this article:

[mandarindesign.com...]

It details opacity nicely, and from it you can infer that to get it to work cross-browser, you may have to coincide with javascript to actually change the class rather than try to "override" specificity of the opacity property. There was an example of using an image within an anchor, but I have not trialled it myself.

By changing the class, your element no longer has that opacity property set, so you can simply leave it off and have fully opaque, or you can change it as you wish.

Hope that helps :)