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

Question

I have a site where as the header there is a linked image. In front of it there is an information box about it. The problem is that you can't click the link in the horizontal area where the information div is wrapped. The wrapper is necessary to get the information box centered.

The image below shows the site. I have marked the non clickable area red. My goal is to have click access everywhere around the text boxes.

I need to fix this without deleting the wrapper and positioning the info boxes with "position absolute" because there is jQuery doing some stuff in the background.

here the html wrap structure:

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

"title" and "innerTitle" are causing the trouble. They are the wrappers which I need to display "mainTitle" and "downloadWrapper" centered.

here is the link to the site if you wish to take a look at the code: http://n.ethz.ch/student/lukal/paint.net/

Thanks in advance :D

Answer 1

not sure what element you want to click, because both boxes in the image are clickable (at least in FF), but the answer for ANY element is pointer-events:none . Simply add this to any element you need (for example if you want to click the sliding divs) and voila! Basically, you can access any element despite its z-index

You can read more about Pointer-Events

Answer 2

获取链接的目标，然后将单击操作应用于实际被单击的<div>本身。

Answer 3

Ok Thank you Fabio. The Answer is, I needed to apply pointer-events:none to the wrapper and then apply pointer-events:all to those elements inside, which I still want to access, like the info-box. That's how you can basically mask out the empty areas occupied by the wrapper.

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>