我有一个具有背景的div：透明，以及边框。在这个div下面，我有更多的元素。
目前，当我在覆盖div外部单击时，我可以单击底层元素。但是，当我直接单击覆盖div时，我无法单击底层元素。
我希望能够单击这个div，以便单击底层元素。
当前回答
您可以放置AP覆盖，如。。。
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
把它放在你不想要的地方。总之是有效的。
其他回答
它不是那样工作的。解决方法是根据每个元素所占据的区域手动检查鼠标点击的坐标。
元素所占的面积可由1找到。获取元素相对于页面左上角的位置，以及2。宽度和高度。像jQuery这样的库使得这非常简单，尽管它可以用普通的js实现。在文档对象上添加mousemove的事件处理程序将从页面的顶部和左侧连续更新鼠标位置。确定鼠标是否在任何给定对象上包括检查鼠标位置是否在元素的左、右、上和下边缘之间。
更简单的方法是使用数据URI内联透明背景图像，如下所示：
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
我认为您可以考虑更改标记。如果我没有错，您希望在文档上方放置一个不可见的层，并且您的不可见标记可能位于文档图像之前（这是正确的吗？）。
相反，我建议您将不可见图像放在文档图像之后，但将位置更改为绝对位置。
请注意，您需要一个父元素来具有position:relative，然后您就可以使用这个想法了。否则，绝对层将仅放置在左上角。
绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素，则包含块为html
希望这有帮助。有关CSS定位的更多信息，请参阅此处。
隐藏覆盖元素确定光标坐标获取这些坐标上的元素触发点击元素再次显示覆盖元素
$('#elementontop').click(e => {
$('#elementontop').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});
例如，只需在所有HTML摘录周围包装一个标记
<a href="/categories/1">
<img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
<div class="caption bg-orange">
<h2>
test1
</h2>
</div>
</a>
在我的示例中，我的字幕类具有悬停效果，指针事件为：无；你只会输
包装内容将保持悬停效果，您可以单击所有图片，包括div，问候！
