Changing Opacity of All Elements but One Div

Question

I'm trying to fade all elements on a webpage except for one div. I've been able to fade all the elements with the following jQuery:

$('*').css('opacity', .3);

However, it seems as if opacity is a property that inherits from parent elements, even if I explicitly set the opacity of the div to 1. I'm drawing a blank as to any solutions right now, so can I have some help here?

Answer 1

If what you want is to make this particular div stand out visually, you might consider an approach like the one that is used for modal windows/lightboxes. Position the div absolutely with a high z-index, and then stack another div in between the highlighted one and the rest of the content with a dark background color and medium opacity. That will in effect "dim" the rest of the page while still keeping the highlighted div with its normal apperance.