Blacking out content leaving one page div visable

So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on.

So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect a开发者_如何学运维n element. It blacks out the rest of the page, apart from that element.

So, any idea?

Cheers!

J

In working with Dojo Javascript widgets, it implements modal dialogs by having one large element be hidden (display:none; background-color:#000; opacity:0.5;) most of the time, though positioned to cover the screen (position:absolute; top:0; left:0; and width and height set by Javascript to the full window size). Then it is given a z-index value and all elements that are intended to be visible are given a z-index above it. If you can relative-ly or absolute-ly position all the elements you want to highlight, this method would work for you.

With just CSS? If so, the best I could come up with is this:

<style>
a:hover *:not(#except)
{
    background:green;
}
</style>
<a href="#">
   Link
   <p>
       green
   </p>
   <p id="except">
       black
   </p>
</p>

Unfortunately the :not() selector is part of CSS3 and most browsers do not yet support it (but Safari 4 does). That is one possibility, but not so nice.

Another option would be with Javascript. If you are only working with rectangular block elements how about getting the x and y value of the element to stay normal, then cutting out four pieces (up, down, left, right) of that element. Absolutely position some divs whose background is some semi-transparent PNG. ie.

------------------
|lef|---up---|rig|
|t--|________|ht-|
|---| normal |---|
|---|________|---|
|---|-down---|---|
------------------