html div：不透明，但允许点击后到达元素

Question

我想在元素的前面（z顺序）做一个轻弹div（交替显示：无），但是如果用户在div出现的确切时刻点击元素，则div接收到点击，而不是元件。

如何让div对点击透明？也就是说，它可以忽略点击，以便onclick事件总是转到div后面的元素吗？

Answer 1

请尝试将以下代码添加到重叠div的样式：

pointer-events: none;

Answer 2

使用pointer-events: none;：

＆＃13;

＆＃13;

div {width: 150px; height: 150px; background: #eee; position: relative; margin: 0}
div:hover {border: 1px solid black}
#over {width:50px; height: 50px; position: absolute; background: red; top: 55px; left: 55px; pointer-events: none}

＆＃13;

<div onclick="alert('click caught')"></div>
<div id="over"></div>

＆＃13;

＆＃13;

＆＃13;