jQuery 'grey' out rest of page apart from div user is hovering on

Question

I am working on a dashboard project where the art director wishes to have an affect similar to the one seen here:

http://www.asos.com/

Except when the user hovers over a dashboard 'widget' then there is an overlay over all other elements on the page including the body in much the same way as Colorbox et all.

I was thinking of creating a new div that spans the entire width of the viewport with z-index 2, all non-active widgets have z-index 3 and the active hovered widget has z-index 1.

Has anyone seen or attempted this to great effect?

Thanks.

Answer 1

siblings

<ul class="listOfImages">
    <li><img ... /></li>
    <li><img ... /></li>
    <li><img ... /></li>
</ul>
<script>
 $('.listOfImages li').hover(function(){
    $(this).siblings().fadeOut();
 }, function(){
    $(this).siblings().fadeIn();
 }
 );
</script>