Access div behind current div. Achieve hole in page to discover content

Question

So basically I am trying to build this site, where there is a page with a bunch of stuff on it, and in order to find the stuff you need to search around the page using this sort of flashlight / tool thing to see what lies underneath. Here is the jsfiddle for a better example:

http://jsfiddle.net/pwneth/hj57k/1896/

CSS:

#tail {
border: 1000px solid #fff;
position: absolute;
float: left;
height: 100px;
width: 100px;
background-color: rgba(0,0,0,.0);
z-index: 100;
top: 0px;
left: 0px;
}

jQuery:

    $(document).bind('mousemove', function(e){
        $('#tail').css({
           left:  e.pageX - 1050,
           top:   e.pageY - 1050
        });
    });

HTML:

 <div id="content"></div>
 <div id="tail"></div>

Essentially what I want works except I want to be able to access the div that is behind the current one so that it can be clicked on and bring me to a new page. Is something like this possible? Thanks for the help.

Answer 1

As @JonnySooter posted above in the comments, if your browser requirements don't include IE <= 10 (see: caniuse pointer-events) you can use the style: pointer-events: none; and mouse events will be ignored on tail.

Otherwise, you could determine which elements are under the mouse position at the time of the click event.

Using the answer from this question: find elements that are stacked under (visually) an element in jquery, you can determine which element should be clicked:

Demo Fiddle

HTML: (Modified to be sequence of DIV's)

<div>kjashkfjaiufaewhfejakdkskjashkfjaiufaiufaewhfejakdkskjashkfjaiufaewhf</div>
<div>kjashkfjaiufaewhfejakdkskjashkfjaiufaiufaewhfejakdkskjashkfjaiufaewhf</div>
…
<div id="tail"></div>

Code (works with jQuery 1.4.2 as in the OP's fiddle):

function GetAllElementsAt(x, y) {
    var $elements = $("body *").map(function() {
        var $this = $(this);
        var offset = $this.offset();
        var l = offset.left;
        var t = offset.top;
        var h = $this.height();
        var w = $this.width();

        var maxx = l + w;
        var maxy = t + h;

        return (y <= maxy && y >= t) && (x <= maxx && x >= l) ? $this : null;
    });

    return $elements;
}

// Change to '.on' in more recent version of jQuery
$('#tail').bind('click', function(evt) {
    var $elements = GetAllElementsAt(evt.pageX, evt.pageY);

    // In this example, "There can be only one" - the zero'th element will be
    // the clicked element
    alert("You clicked on div #" + ($($elements[0]).prevAll().length + 1));
});