user3870112 user3870112 - 4 months ago 19
HTML Question

Disable a div content

I have a link under a div with 100% height and width in a fixed position and z-index:5.
I need to keep this div above my link, but the link doesn't work...
Could I 'disable" but keep this div above my link ?

https://jsfiddle.net/8hu90e9x/1/

CSS :

div {

background:grey;
width:100%;
height:100%;
position:fixed;
top:0;
opacity:0.5;
z-index:5
}

a {
font-size:50px;
z-index:0
}


HTML :

<a href="http://google.com"> My link</a>

<div></div>

Answer

You could add pointer-events:none; to the CSS rules for your div

div {
  background:grey;
  width:100%;
  height:100%;
  position:fixed;
  top:0;
  opacity:0.5;
  z-index:5;
  pointer-events:none;
}

a {
  font-size:50px;
  z-index:0;
}
<a href="http://google.com"> My link</a>

<div></div>