OK, so there are 2 things I think I would do: (1) a CSS3 answer, that isn't yet widely adopted, and (2) a Javascript backup-plan for the rest. (not sure what to do about users without JS on older browsers that don't support the CSS part). Read on...
First: Use this CSS3 code to make the upper element 'invisible' to mouse-interaction:
pointer-events: none;
This is not yet cross-browser compatible. It only works on SVG & HTML Elements in Gecko & Webkit browsers, but only on SVG elements in Opera, and not at all in IE.
Per the MDN:
The CSS property pointer-events allows
authors to control whether or when an
element may be the target of a mouse
event. This property is used to
specify under which circumstance (if
any) a mouse event should go "through"
an element and target whatever is
"underneath" that element instead.
Here's that documentation: https://developer.mozilla.org/en/css/pointer-events
Second: Use some javascript Feature Detection for those browsers that don't yet support this CSS. You'll have to roll your own, similar to Modernizr, since it doesn't test for this yet (to my knowledge). The idea is that you create an element, apply the pointer-events CSS to it, check for it, and if the browser supports the feature, you'll get the expected result, as opposed to something null or undefined; then destroy the element. Anyway, once you have feature detection, you can use jQuery or similar to attach a listener to the uppermost element and assign a click from it to click through to something else. Check out jQuery and it's use of the click() function for more info (not enough reputation to post the link, sry).
If I get time later, I might be able to work up a quick jsFiddle on it. I hope this helps.
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
