制作<a> clickable behind a <div></div></a>

Question

我有一个网站，其中标题是链接图像。在它前面有一个关于它的信息框。问题是您无法单击包含信息div的水平区域中的链接。包装器是获取信息框居中所必需的。

下图显示了该网站。我已将不可点击区域标记为红色。我的目标是在文本框周围随处点击访问。

我需要修复此问题而不删除包装器并将信息框定位为“position absolute”，因为jQuery在后台执行某些操作。

这里的html包装结构：

        <a href="#" class="showTag"></a>
        <div id="title">
            <div id="innerTitle">
                <div id="mainTitle"></div>
                <div id="downloadWrapper"></div>
            </div>
        </div>

“title”和“innerTitle”正在造成麻烦。它们是我需要以“mainTitle”和“downloadWrapper”为中心显示的包装器。

如果您想查看代码，请点击该网站的链接： http://n.ethz.ch/student/lukal/paint.net/

提前致谢：D

Answer 1

不确定要单击哪个元素，因为图像中的两个框都是可点击的（至少在FF中），但ANY元素的答案是指针事件：无。只需将其添加到您需要的任何元素（例如，如果您想单击滑动div）并瞧！基本上，您可以访问任何元素，尽管它的z-index

您可以阅读more about Pointer-Events

Answer 2

获取链接的目的地，并将点击操作应用于实际被点击的<div>本身。

Answer 3

好的，谢谢法比奥。答案是，我需要将pointer-events:none应用于包装器，然后将pointer-events:all应用于我仍然想要访问的内部元素，例如信息框。这就是如何基本上掩盖包装器占用的空白区域。

Answer 4

<style>
#downloadWrapper:hover
{
z-index:99 !important;
}
</style>

<a href="#" class="showTag"></a>
<div id="title">
<div id="innerTitle">
<div id="mainTitle"></div>
<div id="downloadWrapper"></div>
</div>
</div>