I'm trying to make an element isolation tool, where:

• All elements are shaded
• Selected elements, while hovered, are not shaded

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} );
        }
    );

Alternatively, 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!