HTML/CSS：使 div 对点击“不可见”？

由于各种原因，我需要放置一个（大部分）透明的<div>在一些文字上。但是，这意味着无法单击文本（例如，单击链接或选择它）。是否可以简单地使该 div 对于单击和其他鼠标事件“不可见”？

例如，overlaydiv 覆盖了文本，但我希望能够通过单击/选择文本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>

可以使用 CSS 来完成pointer-events。 Firefox 3.6+、Chrome 2+、IE 11+ 和 Safari 4+ 支持此属性。不幸的是，我不知道跨浏览器的解决方法。

#overlay {
  pointer-events: none;
}