Click below elements of a div?

Question

One example I can give:

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

<div class="nightly">
</div>

<div class="body">
  <button>Test</button>
  <a href="#">Test 1</a>
</div>

Wanted to know how about the div.nightly" transparent "for clicks, or can click the button, link, etc. below it?

score 6 · Answer 1 · answered Jan 07 '16 at 12:53

6

Yep in your CSS add pointer-events : none; The clicks will pass through.

answered Jan 07 '16 at 12:53

Jeremy Thille

26,047
12
43
63

Bad IE [support](http://caniuse.com/#feat=pointer-events) but otherwise for sure it is easiest solution – A. Wolff Jan 07 '16 at 12:54
That I did not know. Thank you so much! – Leonardo Jan 07 '16 at 12:56
4

One day I wish I can say "Who cares about IE?" :) – Jeremy Thille Jan 07 '16 at 12:56

score 0 · Answer 2 · edited May 23 '17 at 12:31

0

For IE (from here):

//This is an IE fix because pointer-events does not work in IE
$(document).on('mousedown', '.nightly', function (e) {

    $(this).hide();
    var BottomElement = document.elementFromPoint(e.clientX, e.clientY);
    $(this).show();
    $(BottomElement).mousedown(); //Manually fire the event for desired underlying element

    return false;

});

edited May 23 '17 at 12:31

Community

1
1

answered Jan 07 '16 at 13:04

Huelfe

1,776
16
25

Click below elements of a div?

2 Answers2