Make clickable behind a

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.

A screenshot of what i would like

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

possible duplicate of [Click through a DIV to underlying elements](http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements) — Derongan, Aug 18 '14 at 20:48
A simple fix would be to make the a tag position:absolute; then give it a higher z-index than the rest and make sure its containing element is set to position relative. This way the a sits over the top of everything. Comes with its own problems doing it that way though. — Michael, Aug 18 '14 at 20:49
like already said in the other comment. If I put the tag on top of everything I would override the links inside the info-box. But thank you for the comment :) — Haeri, Aug 18 '14 at 20:56
PS: Thanks for changing. Did not had enough reputation to post an image :/ — Haeri, Aug 18 '14 at 21:00

score 1 · Answer 1 · answered Aug 18 '14 at 20:55

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

answered Aug 18 '14 at 20:55

Devin

7,405
6
35
48

I have added the "pointer-events:none" to the tag, but now it won't even let me click on it anywhere... – Haeri Aug 18 '14 at 21:03

Jage · Answer 2 · 2014-08-19T13:27:22.423

0

Take the destination of your link and apply the click action to the <div> itself that is actually being clicked.

edited Aug 19 '14 at 13:27

answered Aug 18 '14 at 20:47

Jage

7,714
3
29
30

Thank you for the quick response. If I would add a link to the
in the foreground, I would override the links inside the
("downloadWrapp" contains a link). What I basically need is to somehow mask out the area occupied by the empty wrapper. Any idea?
– Haeri Aug 18 '14 at 20:53

score 0 · Accepted Answer · answered Aug 18 '14 at 21:12

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.

score 0 · Answer 4 · answered Aug 18 '14 at 21:22

0

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

answered Aug 18 '14 at 21:22

MRRaja

930
10
21

You need to post an explanation of your coding! – Jacob Gray Aug 18 '14 at 21:33

Make clickable behind a

4 Answers4