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

我加上这个答案是因为我没有看到它的全部内容。我能够使用elementFromPoint完成这一操作。所以基本上：

将单击附加到要单击的div把它藏起来确定指针所在的元素单击元素。

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

在我的例子中，重叠的div是绝对定位的——我不确定这是否会产生差异。这至少适用于IE8/9、Safari Chrome和Firefox。

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

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

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

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

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

是的，可以强制重叠层通过（忽略）单击事件。此外，你可以让特定的孩子被排除在这种行为之外。。。

可以使用指针事件执行此操作

指针事件影响对点击、轻击、滚动和悬停事件的反应。

在应该忽略/通过您设置的所述事件的层中

pointer-events: none; 

需要再次响应鼠标/轻敲事件的无响应层的子级需要：

pointer-events: auto; 

如果您使用多个重叠的div层（可能有些父层是透明的），那么第二部分非常有用，您需要能够单击子元素，并且仅单击该子元素。

示例用法：

.父级{指针事件：无；}.儿童{指针事件：自动；}<div class=“parent”><a href=“#”>我没有反应</a><a href=“#”class=“child”>我又可以点击了，哇</a></div>

更简单的方法是使用数据URI内联透明背景图像，如下所示：

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

我需要这样做，并决定走这条路：

$('.overlay').click(function(e){
    var left = $(window).scrollLeft();
    var top = $(window).scrollTop();

    //hide the overlay for now so the document can find the underlying elements
    $(this).css('display','none');
    //use the current scroll position to deduct from the click position
    $(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
    //show the overlay again
    $(this).css('display','block');
});