Click elements below a div?

Asked

Viewed 417 times

1

An example I can give:

.noturno{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}
<div class="noturno">
</div>

<div class="corpo">
  <button>Teste</button>
  <a href="#">Teste 1</a>
</div>

I wonder how I turn the div.noturno "transparent" for clicks, that is, you can click the button, link, etc below it?

html css

2 answers

5


Add in the night class css:

pointer-events: none;

1

Your div.noturno has virtually the same CSS as the fade div modal of jQueryUI, and its intention is precisely to prevent the interaction of the user with the other elements of the page.

In this case, the dialogue itself is only accessible, because it has a z-index higher than the div modal or is inside the div.noturno.

z-index major

.noturno{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}

.corpo{
  position: relative; 
  z-index: 9001; 
}
<div class="noturno">
</div>

<div class="corpo">
  <button>Teste</button>
  <a href="#">Teste 1</a>
</div>

internal div:

.noturno{
  z-index: 9000; 
  position: fixed; 
  height: 100%; 
  width: 100%; 
  background-color: rgba(0,0,0,0.5);
}
<div class="noturno">
  <div class="corpo">
    <button>Teste</button>
    <a href="#">Teste 1</a>
  </div>
</div>

  • But then in the case I was running away from my purpose, which was to make a "night mode" to make the site darker.. The other answer went well.

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.