Isabela Isabela - 3 months ago 12
CSS Question

Click on overlapping div using pointer-events and hide div

I made this code so that once you click the "inner div", click go to the "outer div" using the "pointer-events: none;" in CSS.



$("#outer").click(function(){
alert("outer clicked")

});

$("#inner").click(function(e){
alert("inner clicked")
this.style.display = 'none';
e.stopPropagation();
});

#outer {
width:300px;
height:200px;
border:3px solid;
margin:auto;
background: green;

}
#inner {
pointer-events: none;
position: absolute;
top: 150px;
left: 120px;
width: 100px;
height: 100px;
background: yellow;
border:3px solid;
margin:auto;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
<div id="inner">inner div</div>
Outer div
</div>





OK, the function is perfect. But if you click anywhere within the outer div, I need the inner div to hide. I tried using
this.style.display = 'none';
, but it does not work.

Answer

You only need one event listener on #outer, to hide the inner div when #outer has been clicked.

$('#outer').click(function (e) {
    $('#inner').hide();
});
#outer {
    width:300px;
     height:200px;
     border:3px solid;
     margin:auto;
     background: green;

}
#inner {
  pointer-events: none;
  position: absolute; 
  top: 150px; 
  left: 120px;
  width: 100px;
  height: 100px;
  background: yellow;
  border:3px solid;
  margin:auto;
  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="outer">
    <div id="inner">inner div</div>
     Outer div
</div>

Comments