Databases
StackOverflow2013
Postsdbo
POHow do I pass javascript events from one element to another?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow do I pass javascript events from one element to another?
    text
    copied!<p>Setting up the stage:</p> <p>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). </p> <p>My question:</p> <p>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.</p> <p>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.</p> <p>Example HTML:</p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>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; }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;}</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="sandwich"&gt; &lt;div class="stack" id="bottom"&gt; &lt;div class="tile" id="tile1"&gt;1&lt;/div&gt; &lt;div class="tile" id="tile2"&gt;2&lt;/div&gt; &lt;div class="tile" id="tile3"&gt;3&lt;/div&gt; &lt;div class="tile" id="tile4"&gt;4&lt;/div&gt; &lt;div class="tile" id="tile5"&gt;5&lt;/div&gt; &lt;/div&gt; &lt;div class="stack" id="top"&gt; &lt;div class="over" id="over1"&gt;Tooltip for 1&lt;/div&gt; &lt;div class="over" id="over2"&gt;Tooltip for 2&lt;/div&gt; &lt;div class="over" id="over3"&gt;Tooltip for 3&lt;/div&gt; &lt;div class="over" id="over4"&gt;Tooltip for 4&lt;/div&gt; &lt;div class="over" id="over5"&gt;Tooltip for 5&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;div id="log"&gt;&lt;/div&gt;</code></pre> </div> </div> </p> <p>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.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload