Creating a click-through div

Question

I want to create two divs. Div A and Div B. Div A is on the top of Div B in such a way that Div A completely covers Div B . What I want to achieve is - Div A should be click-through so that I can click div B which is lying under Div A.

FYI- I don't want to hide div A. It should be there but one should be able to click right through it.

Any help appreciated. Thanks in advance.

Fully transparent? As in invisible? If yes, then what's the point of having it there if it's click-through. — Šime Vidas, Oct 06 '12 at 15:17
By 'transparent' you mean that its opacity should be tweaked, or that it should be transparent to clicks (they should pass through it)? — Renato Zannon, Oct 06 '12 at 15:18
@RenatoZannon sounds like transparent as in, does not intercept clicks but allows them to transcend through it — Darius, Oct 06 '12 at 15:18
@ŠimeVidas I'm just guessing! I think it's poor choice of words to express the issue described in the question body — Darius, Oct 06 '12 at 15:20
I improved the phrasing a bit; I think this is what he/she was trying to say. — Chris, Oct 06 '12 at 15:34
@Abody97 The OP didn't respond for an hour. I recommend closing this question, instead of trying to guess what was meant. — Šime Vidas, Oct 06 '12 at 16:14
guys sorry for the late response. I tried solving this using the pointer-events. It works. Thanks for the effort you put in. Right now I am unable to update the answer here. Will post it as soon as this site allows me to do so. — Anoop Nair, Oct 06 '12 at 16:25

score 1 · Answer 1 · answered Oct 06 '12 at 15:17

1

I suggested this for someone else looking for similar functionality. Use jQuery so that you are able catch the click event on the overlaying div and delegate it to the underlying div to simulate this

$(document).ready(function(){
   $('#myDiv').click(function(event){ 
     event.preventDefault(); 
     $('#myOtherDiv').trigger(event); 
   });

});

Something along those lines (either use .trigger or just .click on the underlying div)

answered Oct 06 '12 at 15:17

Darius

5,180
5
47
62

1

What if the other DIV contains multiple elements, and the OP wants to have different click handlers for those elements? – Šime Vidas Oct 06 '12 at 15:19
1

The OP did not mention using jQuery. He should install it just for doing this one thing? – Sparky Oct 06 '12 at 15:20
If the underlying div contains multiple elements it could be a case of setting display:none or .hide() on click and refiring the event/simulating it at the event's co-ordinates? – Darius Oct 06 '12 at 15:26

Creating a click-through div

1 Answers1