使<a>点击可点击</a> <div>

Question

我有一个网站，其中的标题是链接的图像。 它前面有一个信息框。 问题是您无法单击包装了div信息的水平区域中的链接。 必须使用包装器才能使信息框居中。

下图显示了该站点。 我已将不可点击区域标记为红色。 我的目标是在文本框周围的任何地方都具有单击访问权限。

我需要解决此问题，而不必删除包装器并使用“ position absolute”来定位信息框，因为jQuery在后台做了一些工作。

这里是html wrap结构：

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

“标题”和“ innerTitle”正在引起麻烦。 它们是我需要以居中显示“ mainTitle”和“ downloadWrapper”的包装器。

如果您想看一下代码，这里是网站的链接： http : //n.ethz.ch/student/lukal/paint.net/

提前致谢

Answer 1

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

您可以阅读有关指针事件的更多信息

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>