Question

Here’s an example of my code.

   <div id="wrapper1" style="width:300px">
     <div id="panel1">
       content
     </div>
     <div id="tab1">
       <a>Tab 1</a>
     </div>
   </div>

   <div id="wrapper2" style="width:200px">
     <div id="panel2">
       content
     </div>
     <div id="tab2">
       <a>Tab 2</a>
     </div>
   </div>

The panels are display:none; on page load, but the tabs are visible. I’m using slideToggle() on the tabs to open/close the panels.

The problem is that I want the tabs centered in each wrapper but be spaced about 10px apart when the panels are collapsed. But since both wrappers are position:absolute; the second tab is “under” the first wrapper because the first wrapper’s width goes over the second wrapper. This obviously leaves me with an unclickable second tab. Does anyone know how to click through the transparent part of an absolutely positioned div? It doesn’t work to use pointer-events:none; on the first wrapper because I need to be able to click its tab as well.

Answer 1

You can’t click through the transparent part of a div; transparent or not, the div on top will receive the click.