html - 选择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>

这使得元素“点击”。