CODEWITHSUNDEEP
htmlcssevents
David Wolever
David Wolever

Reputation: 154594

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

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>

Upvotes: 122

Views: 42105

Answers (5)

Muhammad Nasir
Muhammad Nasir

Reputation: 2204

Alternative for disabling all events (or clicks) on a div is unbind() in jQuery.
It removes all events on tags:

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

or, to unbind just clicks:

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

Upvotes: -1

X3R0
X3R0

Reputation: 6344

Use this jQuery

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

replace "div" with the ID or element

Upvotes: 0

Donald Duck
Donald Duck

Reputation: 8902

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();
}

Upvotes: 0

Ionuț G. Stan
Ionuț G. Stan

Reputation: 179179

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;
}

Upvotes: 202

Joeri Sebrechts
Joeri Sebrechts

Reputation: 11156

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

Upvotes: 3

Related Questions