HTML/CSS:让点击"看不见"？

Question

由于各种原因,我需要<div>在某些文本上放置(大部分)透明.但是,这意味着无法单击文本(例如,单击链接或选择它).是否可以简单地使这个div对点击和其他鼠标事件"隐形"？

例如,overlaydiv封面涵盖了文本,但我希望能够通过overlaydiv 单击/选择文本:

<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

它可以使用CSS完成pointer-events.Firefox 3.6 +,Chrome 2 +,IE 11+和Safari 4+支持此属性.不幸的是,我不了解跨浏览器的解决方法.

#overlay {
  pointer-events: none;
}