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>

Answer 1

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

See the first answer to this question: http://stackoverflow.com/questions/1401658/html-overlay-which-allows-clicks-to-fall-through-to-elements-behind-it

Answer 2

It can be done using CSS pointer-events in Firefox >= 3.6 and Safari >= 4.0. Probably some Chrome version too. Unfortunately, I don't have knowledge of a cross-browser workaround.

#overlay {
  pointer-events: none;
}