How do I pass javascript events from one element to another?

Question

Setting up the stage:

I have 2 layers one on top of the other. The bottom layer contains links (simple images), The top layer contains advanced tooltip like hovers for the bottom layer. These tooltips can be large (they can overlap onto other links easily, and almost always overlap the link they are tooltipping).

My question:

I'd like my mouseover events to occur on the bottom layer, and then on mouseover display the tooltip in the upper layer. This way as you move off of the bottom link the tooltip in the upper layer goes away, and the tooltip for the new link can show up.

How do I take the events from the top layer and pass them to the layer below instead? So that the top layer is event transparent.

Example HTML:

jQuery(document).ready(function(){
	jQuery('div.tile').click(function(){
		jQuery('#log').html(this.id + " clicked");
		return false;
	});
	jQuery('div#top').click(function(){
		jQuery('#log').html('Top clicked');
		return false;
	});
});

.tile { width: 100px; height: 100px; position: absolute; }
.tile:hover, over:hover {border: 1px solid black;}
.over { width: 100px; height: 100px; position: absolute; display:none}
.stack, #sandwich { width: 400px; height: 400px; position: absolute; }
#tile1 {top: 50px; left: 50px;}
#tile2 {top: 75px; left: 10px;}
#tile3 {top: 150px; left: 310px;}
#tile4 {top: 250px; left: 250px;}
#tile5 {top: 150px; left: 150px;}
#over1 {top: 55px; left: 55px;}
#over2 {top: 80px; left: 15px;}
#over3 {top: 155px; left: 315px;}
#over4 {top: 255px; left: 255px;}
#over5 {top: 155px; left: 155px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<div id="sandwich">
	<div class="stack" id="bottom">
		<div class="tile" id="tile1">1</div>
		<div class="tile" id="tile2">2</div>
		<div class="tile" id="tile3">3</div>
		<div class="tile" id="tile4">4</div>
		<div class="tile" id="tile5">5</div>
	</div>
	<div class="stack" id="top">
		<div class="over" id="over1">Tooltip for 1</div>
		<div class="over" id="over2">Tooltip for 2</div>
		<div class="over" id="over3">Tooltip for 3</div>
		<div class="over" id="over4">Tooltip for 4</div>
		<div class="over" id="over5">Tooltip for 5</div>
	</div>
</div>
<div id="log"></div>

With the example javascript I've verified that the events work like normal, and only top is clicked. But I basically want the "over" items to be event transparent.

Answer 1

For people stumbling on this nine years later (like I did) the best way to do this now is with the CSS pointer-events property... simply set it to 'none' for your element(s) and behold the magic. No JS required.

https://caniuse.com/#search=pointer-events