Shade entire page, unshade selected elements on hover

I'm trying to make a page inspection tool, where:

• The whole page is shaded
• Hovered elements are unshaded.

Unlike a lightbox type app (which is similar), the hovered items should remain in place and (ideally) not be duplicated.

Originally, looking at the image lightbox implementations, I thought of appending an overlay to the document, then raising the z-index of elements upon hover. However this technique does not work in this case, as the overlay blocks additional mouse hovers:

$(function() {
    window.alert('started');
    $('<div id="overlay" />').hide().appendTo('body').fadeIn('slow');


    $("p").hover(
        function () {
            $(this).css( {"z-index":5} );
        }, 
        function () {
            $(this).css( {"z-index":0} );
        }
    );

Alternati开发者_StackOverflow中文版vely, JQueryTools has an 'expose' and 'mask' tool, which I have tried with the code below:

$(function() {
    $("a").click(function() {
         alert("Hello world!");
    });

    // Mask whole page
    $(document).mask("#222");

    // Mask and expose on however / unhover 
    $("p").hover(
        function () {
            $(this).expose();
        }, 
        function () {
            $(this).mask();
        }
    );

}); 

Hovering does not work unless I disable the initial page masking. Any thoughts of how best to achieve this, with plain JQuery, JQuery tools expose, or some other technique? Thankyou!

What you can do is make a copy of the element and insert it back into the DOM outside of your overlay (with a higher z-index). You'll need to calculate its position to do so, but that's not too difficult.

Here is a working example.

In writing this I re-learned the fact that something with zero opacity cannot trigger an event. Therefore you can't use .fade(), you have to specifically set the opacity to a non-zero but very small number.

$(document).ready(function() { init() })

function init() {
    $('.overlay').show()
    $('.available').each(function() {
       var newDiv = $('<div>').appendTo('body');
       var myPos = $(this).position()  
       newDiv.addClass('available')
       newDiv.addClass('peek')
       newDiv.addClass('demoBorder')                
       newDiv.css('top',myPos.top+'px')
       newDiv.css('left',myPos.left+'px')
       newDiv.css('height',$(this).height()+'px')
       newDiv.css('width',$(this).width()+'px')  
       newDiv.hover(function()
          {newDiv.addClass('full');newDiv.stop();newDiv.fadeTo('fast',.9)},function()
          {newDiv.removeClass('full');newDiv.fadeTo('fast',.1)})   
    })  
}

Sorry for the prototype syntax, but this might give you a good idea.

function overlay() {
  var div = document.createElement('div');
  div.setStyle({
    position: "absolute",
    left: "0px",
    right: "0px",
    top: "0px",
    bottom: "0px",
    backgroundColor: "#000000",
    opacity: "0.2",
    zIndex: "20"
  })
  div.setAttribute('id','over');
  $('body').insert(div);
}

$(document).observe('mousemove', function(e) {
  var left = e.clientX,
      top = e.clientY,
      ele = document.elementFromPoint(left,top);
      //from here you can create that empty div and insert this element in there
})

overlay();