How can I give focus back to object with lower z-index, trying to create a series of transparent divs on top of a map

Question

If I have a parent div that contains a child div on top of it, can I give the parent div the focus without hiding the child div?

I am using Google Maps API and would like to draw a grid of transparent divs on top of it for inserting information, however, with all of those little divs on top of my map, I cannot drag the map.

I'm sure I can do it using the API but that's sort of beside the point, because I would like to do this regardless of what I'm working on top of.

<div style="position: relative; width: 100px; height: 100px;" id="wanttofocus">
    <div style="position: absolute; width: 100px; height: 100px;" 
    id="want_to_see_but_dont_want_to_focus_on">Some overlay information</div>
</div>

I am using JQuery and messed around with .focus() but that didn't work out.

THANKS!

Answer 1

Turns out, you can "passthru" events with jQuery:

$(document).ready(function(){
    $('#want_to_see_but_dont_want_to_focus_on').bind('mousemove mousedown mouseup', function(e){
        $("#wanttofocus").trigger(e); // passing thru the event
    });

    $('#wanttofocus').bind('mousemove mousedown mouseup', function(e){
        $('.status').html(e.type + ' ' + e.pageX + ' ' + e.pageY);
    });
});

I've thrown together a jsFiddle, feel free to play: http://jsfiddle.net/gK6Aa/