lower layer (z-index) with hyperlink becomes disabled when next layer is displayed (html) [duplicate]

问题

This question already has an answer here:

Closed 7 years ago.

Possible Duplicate:
click link below a higher z-index div

I have two divs, one is initially hidden via css. When a button is clicked a jquery fires up showing the 2nd div on top of the 1st div. The 1st div is still visible especially the hyperlink, which is what i wanted. However, the hyperlink becomes disabled and clicking it would do no good.

this is my code:

<button id="clickMe">Click></button>

<div class="div1">
   <a href="external.html">Load</a>
</div>   

<div class="div2">
   <p>This shows when button is clicked</p>
</div>

this is my jquery

$('#clickMe').click(function(){
  $('#div2').show();
});

the div1 has a z-index: -1; .

The hyperlink is still visible but i cannot click on it. Is it possible to make this clickable without showing the entire div1? many thanks.

回答1:

Another layer (with transparent background) is covering it. There is no way you can click on the elements below, unless you are willing to try some JavaScript hack as described in this related question(s):

• Passing mouse clicks through an overlaying element <div>

来源：https://stackoverflow.com/questions/7999271/lower-layer-z-index-with-hyperlink-becomes-disabled-when-next-layer-is-display