我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。

目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。

我希望能够单击这个div,以便单击底层元素。


当前回答

例如,只需在所有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,问候!

其他回答

您可以放置AP覆盖,如。。。

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}
<div id="overlay"></div>

把它放在你不想要的地方。总之是有效的。

不,你不能点击一个元素。您可以获取单击的坐标,并尝试找出单击元素下面是什么元素,但对于没有document.elementFromPoint的浏览器来说,这真的很乏味。然后,您仍然需要模拟默认的单击操作,这不一定是微不足道的,这取决于您在那里有什么元素。

由于你有一个完全透明的窗口区域,你可能会更好地将其作为外部的独立边界元素来实现,让中心区域没有障碍物,这样你就可以直接点击。

例如,只需在所有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,问候!

另一个尝试(情境)的想法是:

将所需内容放入div中;将非点击覆盖放在整个页面上,z索引更高,制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置,您希望使用更高的z索引进行单击?

有什么想法吗?

我认为您可以考虑更改标记。如果我没有错,您希望在文档上方放置一个不可见的层,并且您的不可见标记可能位于文档图像之前(这是正确的吗?)。

相反,我建议您将不可见图像放在文档图像之后,但将位置更改为绝对位置。

请注意,您需要一个父元素来具有position:relative,然后您就可以使用这个想法了。否则,绝对层将仅放置在左上角。

绝对位置元素相对于第一个父元素定位具有非静态位置的元素。如果没有找到这样的元素,则包含块为html

希望这有帮助。有关CSS定位的更多信息,请参阅此处。