HTML/CSS: Make a div "invisible" to clicks?

Question

For various reasons, I need to put a (mostly) transparent <div> over some text. However, this means that the text can't be clicked (eg, to click links or select it). Would it be possible to simply make this div "invisible" to clicks and other mouse events?

For example, the overlay div covers covers the text, but I would like to be able to click/select the text through the overlay div:

<div id="container">
    <p>Some text</p>
    <div id="overlay" style="position: absolute; top: 0;
                             left: 0; width: 100%; height:100%">
        ... some content ...
    </div>
 </div>

The short answer is no. (Has been discussed several times, but dupes are hard to find for this, can't think of good keywords...) What do you need the transparent DIV for? — Pekka, Aug 21 '10 at 18:46
I don't think that's possible. Maybe you tell about the "various reasons" i.e. what you really want to achieve? — davehauser, Aug 21 '10 at 18:47
@Null I'd withhold the -1 until it's clear what the OP wants to do. — Pekka, Aug 21 '10 at 18:56
NullUserException - How would what he is proposing stop people from copying content from his website? If anything, he is trying to do the opposite - he wishes to obviate the effect of his transparent div (of making text harder to click and select). — Hammerite, Aug 21 '10 at 18:57
Thanks for the answers, guys. So you know, the strongest of the "various reasons" is that "it will make life (and positioning elements) a whole lot easier. I didn't mention it in the question, though, because I know that I *could* do it other ways, but I'd like to see if it's possible *this* way. — David Wolever, Aug 21 '10 at 19:52
Here's one of the older questions... http://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it/3538713#3538713 — Steven Schlansker, Aug 21 '10 at 20:16

score 191 · Accepted Answer · edited Jul 27 '15 at 11:59

191

It can be done using CSS pointer-events. This property is supported in Firefox 3.6+, Chrome 2+, IE 11+, and Safari 4+. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}

edited Jul 27 '15 at 11:59

rink.attendant.6

44,500
61
101
156

answered Aug 21 '10 at 19:43

Ionuț G. Stan

176,118
18
189
202

3

Ah, that looks good! Now, the only problem is that I've got to make some of the children *accept* pointer events… But maybe I can figure that out. Thanks! – David Wolever Aug 21 '10 at 19:54
7

Cool: `pointer-events: visible` looks like it'll do *exactly* what I want. Thanks! – David Wolever Aug 21 '10 at 19:55
Works in chrome! Love that this is possible! – B T Jun 23 '14 at 22:08
There's a pointer events polyfill: https://github.com/kmewhort/pointer_events_polyfill – rink.attendant.6 Jul 27 '15 at 11:58
Simplest and most strait forward answer! – Jones G Feb 15 '18 at 22:33
1

Love when pure CSS does it. Thanks dood – Billeh Mar 25 '22 at 01:26

score 3 · Answer 2 · edited May 23 '17 at 11:54

3

It can be done by refiring the event after you temporarily hide the overlay.

See the first answer to this question: HTML "overlay" which allows clicks to fall through to elements behind it

edited May 23 '17 at 11:54

Community

1
1

answered Aug 21 '10 at 19:28

Joeri Sebrechts

11,012
3
35
50

score 0 · Answer 3 · answered Apr 25 '16 at 16:05

You can do this by hiding the overlay like this:

overlay.onclick = function(){
    window.event.srcElement.style.visibility = "hidden";
    var BottomElement = document.elementFromPoint((navigator.appName.substring(0,3) == "Net") ? e.clientX : window.event.x,(navigator.appName.substring(0,3) == "Net") ? e.clientY : window.event.y);
    window.event.srcElement.style.visibility = "visible";
    BottomElement.click();
}

score 0 · Answer 4 · answered Feb 27 '18 at 20:14

0

Use this jQuery

$("div").click(function(e){e.preventDefault();});

replace "div" with the ID or element

answered Feb 27 '18 at 20:14

Dean Van Greunen

5,060
2
14
28

score -1 · Answer 5 · answered Jul 27 '15 at 12:13

-1

Alternative for disabling all events(or chick) on a div is unbind() all event that are attached with tags by default

  $('#myDivId').unbind();

or

  $('#myDivId').unbind("click");

answered Jul 27 '15 at 12:13

Muhammad Nasir

2,126
4
35
63

1

`jquery` now uses `off()` in favor of `unbind()`, and only removes the handlers, doesn't prevent the div from capturing the click. – pmoleri Jul 13 '16 at 22:59

HTML/CSS: Make a div "invisible" to clicks?

5 Answers5

Linked

Related