选择div css下的内容

Question

我有一个透明的<div> ，它的宽度和高度为100% ，内容大于自身，因此它覆盖整个屏幕并滚动。 我需要能够选择并悬停在它后面的元素上。 从下面的例子可以看出，我无法做到这一点。 如何在不删除可滚动<div>情况下解决此问题？

 #screen { width: 100%; height: 100%; position: fixed; z-index: 5; background-color: transparent; overflow: auto; } #content { height: 200vh; width: 100%; }

 <div id='screen'> <div id='content'></div> </div> <span>highlight me!</span> <button>click me!</button>

Answer 1

只需添加pointer-events: none; 到叠加div#screen ：

 #screen { width: 100%; height: 100%; position: fixed; z-index: 5; background-color: transparent; pointer-events: none; }

 <div id='screen'></div> <span>highlight me!</span> <button>click me!</button>

这使得元素“点击”。

Answer 2

尝试将 div 包裹在内容周围；

 <div id='screen'> <span>highlight me!</span> <button>click me!</button> </div>