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

Question

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

I use the Google Maps API and would like to draw a grid of transparent divs on top to insert information, however, with all these small divs on the top of my map, I cannot drag the map.

I'm sure I can do this using the API, but it seems like I would like to do this no matter what I'm working on.

<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 confused with .focus() , but this did not work.

THANKS!

Answer 1

Turns out you can "passthru" events using 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 compiled jsFiddle, feel free to play: http://jsfiddle.net/gK6Aa/