Menu
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> 
321
You can hide an element in CSS using the CSS properties display: none or visibility: hidden. display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.
Making it invisible with visibility still makes it use up space. Rather try set the display to none to make it invisible, and then set the display to block to make it visible.
Just use the pointer-events:none css property to allow click events to go through the element.
We hide the divs by adding a CSS class called hidden to the outer div called . text_container . This will trigger CSS to hide the inner div.
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; } 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
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
