making a div visible but able to click through

Question

I have two full screen divs stacked.

css

#border-overlay {
    position:absolute;
    z-index: 100;
    top:0; left:0;
    width: 100vw;          
    height: 100vh;
    box-sizing: border-box; 
    border: solid 8px white;
}

#button
    position: absolute;
    display: block;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 15;
}

html

<div id="border-overlay"></div>
<a id="button" href=""> ... </a>

I need the border div on top the button div, however this removes the link function of the button which I want to keep. Essentially the button takes up the full screen so you can click anywhere.

Maybe this helps: http://stackoverflow.com/questions/3680429/click-through-a-div-to-underlying-elements — daymosik, Jul 23 '16 at 11:48
Your code is not clear what you need, can you please describe more? — Mohammad Kermani, Jul 23 '16 at 12:16
I apologize I missed an id. I want the border over everything else on my full page website (all 4 sides not just top), but then it seems to not be able to click the button underneath — user3550879, Jul 23 '16 at 23:30

score 0 · Answer 1 · answered Jul 23 '16 at 13:35

Not 100% sure what you are trying to achieve but you can do the following:

Insert onclick event to your wrapper div that will call click of your anchor tag. Also add to css the pointer cursor and it will look like you press on the anchor.

function clickMe() {
  document.getElementById("button").click();
}

#border-overlay {
    position:absolute;
    z-index: 100;
    top:0; left:0;
    width: 100vw;          
    height: 100vh;
    box-sizing: border-box; 
    border: solid 8px white;
    background-color: yellow;
    cursor: pointer;
}

#button{
    position: absolute;
    display: block;
    top: 0; left: 0;
    height: 100%; width: 100%;
    background-color: rgba(0,0,0,0);
    z-index: 15;
}

<div id="border-overlay" onclick="clickMe()"></div>
<a id="button" href="/asdad"> Link me up Scottie</a>

the border div is not the button, the button is underneath and changes — user3550879, Jul 23 '16 at 23:32

score 0 · Accepted Answer · answered Jul 23 '16 at 23:34

0

No JavaScript needed. Use the CSS pointer-events: none on the div:

#border-overlay {
  position: absolute;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  border: solid 8px white;
  pointer-events: none;
}

jsFiddle example

answered Jul 23 '16 at 23:34

j08691

204,283
31
260
272

does pointer events have got good cross-browser compatibility as well as screen size responsiveness? – user3550879 Jul 28 '16 at 03:50

making a div visible but able to click through

2 Answers2