Blacking out content leaving one page div visable

Question

Hiya,

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 an element. It blacks out the rest of the page, apart from that element.

So, any idea?

Cheers!

J

Answer 1

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

Answer 2

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.