重叠的div点击问题

Question

如何点击重叠div后面的链接。

CSS是

#apDiv1 {
position: absolute;
left: 38px;
top: 28px;
width: 221px;
height: 182px;
z-index: 1;
text-align:right;
}
#apDiv2 {
position: absolute;
left: 117px;
top: 13px;
width: 169px;
height: 210px;
z-index: 2;
}

并且HTML是

<div id="apDiv1"><a href="javascript:alert('link1');">Link 1</a></div>
<div id="apDiv2">
  <p>&nbsp;</p>
<p><a href="javascript:alert('link 2');">Link 2</a></p>
</div>

- user689751

---

可能是通过覆盖元素<div>传递鼠标点击的重复问题。 - j08691

@MattBurland - 我无法在你的fiddle中点击链接1。 - j08691

谢谢Matt，我注意到你添加了不透明度，但仍然无法点击Link1。 - user689751

@iPhoneDeveloper：是的，抱歉我并不是在建议这是一个解决方案，只是创建了一个小例子，以便我们都能看到问题所在。我添加了颜色和透明度，以便您可以看到重叠的位置。 - Matt Burland

感谢Matt提供的代码示例，有人建议已经有答案了，它使用一些JavaScript来查找节点的位置，我想要一个更简单的解决方案，可以让鼠标事件穿过上层div。 - user689751

Answer 1

尝试这个：

将pointer-events:none;添加到上层div（apDiv2）中，然后：

#apDiv2 a {
    pointer-events:auto;
}

重新启用它，以便在您的上部div中的链接中使用。

至少在FF中似乎有效。

更新后的示例。

- Matt Burland