Как передать события javascript от одного элемента к другому?

Настройка сцены:

У меня два слоя один поверх другого. Нижний слой содержит ссылки (простые изображения), Верхний слой содержит расширенные всплывающие подсказки, такие как наведение курсора на нижний слой. Эти всплывающие подсказки могут быть большими (они могут легко перекрываться с другими ссылками и почти всегда перекрывают ссылку, которую они всплывают).

Мой вопрос:

Я бы хотел, чтобы мои события наведения указателя мыши происходили на нижнем уровне, а затем при наведении курсора отображалась всплывающая подсказка на верхнем уровне. Таким образом, когда вы отойдете от нижней ссылки, всплывающая подсказка на верхнем уровне исчезнет, ​​и всплывающая подсказка для новой ссылки может появиться.

Как мне взять события из верхнего уровня и передать их нижнему слою вместо? Чтобы верхний уровень был прозрачным для событий.

Пример 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 (' Самые популярные '); вернуть ложь; }); }); 

 .tile {width: 100px; высота: 100 пикселей; позиция: абсолютная; } .tile: hover, over: hover {border: 1px сплошной черный;} .over {width: 100px; высота: 100 пикселей; позиция: абсолютная; display: none} .stack, #sandwich {ширина: 400 пикселей; высота: 400 пикселей; позиция: абсолютная; } # 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;} 

  
 
 div id = "log"> 
 

На примере javascript я убедился, что события работают как обычно, и нажимается только верхняя часть. Но я в основном хочу, чтобы элементы "поверх" были прозрачными для событий.