使<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>