How to uncover a DIV covered by other DIVs without hiding them?

Question

I have four DIVs that split the screen evenly into 4 parts. There is another full-screen DIV for canvas.

I want to make it possible that those DIVs don't obstruct each other – that is, if the user clicks on a link in the smaller (one of the 4) DIV, they get this link, if the user clicks on the canvas element in the big DIV, that element responds.

Here's the code... Thank you!

#graph-container {
    top: 50px;
    bottom: 50px;
    left: 50px;
    right: 50px;
    position: fixed;
    z-index: 9;
    padding-left: 0px;
    padding-right: 0px;
    -webkit-animation: blink 2s linear 0s;
}


#NW { z-index: 10; position:fixed; width:50%; height:50%; top:0;   left:0; }
#NE { z-index: 10; position:fixed; width:50%; height:50%; top:0;   left:50%; }
#SW { z-index: 10; position:fixed; width:50%; height:50%; top:50%; left:0; }
#SE { z-index: 10; position:fixed; width:50%; height:50%; top:50%; left:50%; }

Use absolute position for your 4 div. Also for better answer post your markup — keypaul, May 23 '14 at 22:08
made a jsfiddle http://jsfiddle.net/42wyJ/ it seems to work, so you're saying you want a canvas behind the four elements to be clickable? — actual_kangaroo, May 23 '14 at 22:16

score 2 · Accepted Answer · edited May 23 '17 at 11:57

2

With pointer-events you can click through the overlay div, but have the overlay contain clickable elements.

jsFiddle: http://jsfiddle.net/42wyJ/5/

#NW{
    pointer-events:none;
}
#NW * { 
    pointer-events:auto;

}

Click through a DIV to underlying elements

https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events

edited May 23 '17 at 11:57

Community

1
1

answered May 23 '14 at 22:21

actual_kangaroo

5,971
2
31
45

1

But now links in the upper layer aren't clickable as OP asked. I think this is impossible without some clever scripting. – Julian May 23 '14 at 22:24
2

ahh you can reset pointer-events on the child elements to auto, this allows clicks on the upper layer too! http://jsfiddle.net/42wyJ/5/ – actual_kangaroo May 23 '14 at 22:29

How to uncover a DIV covered by other DIVs without hiding them?

1 Answers1