如何在不丢失下层鼠标行为的情况下使用 DIV 覆盖？

Question

假设我有一个包含各种控件的网页，其中一些控件定义了悬停和单击行为。然后，我在页面中添加了一个带有额外信息的半透明 DIV 叠加层，以叠加在页面其余部分的顶部：

<div class="overlay"></div>

.overlay {
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    background: rgba(0,0,0,.5);
}

此叠加层在其他内容之上创建了一个新层，这是所希望的，但不幸的是，它也阻止了底层控件的鼠标行为。启用新图层后，悬停并单击底层控件不会执行任何操作。

有没有办法以这种方式使用叠加层，同时保留鼠标与底层内容的交互？

在我的应用程序中，叠加层是必需的，但我可以使用任何 JavaScript、CSS、jQuery 或其他可能有效的技术。

谢谢！

Answer 1

很遗憾，没有。我知道做类似事情的唯一方法是通过在覆盖 div 顶部使用带有图像映射的半透明图像并将其全部对齐来伪造它。这显然过于复杂，您应该寻找解决方案来以其他方式实现您使用此叠加层获得的效果，但它可以实现您正在寻找的效果。

Answer 2

刚刚写了这个……几乎没有经过测试。很抱歉，但我认为它有点用。

$.fn.invisiClone = function() {
    $.each($(this), function() {
        var newTop = $(this).offset().top;
        var newLeft = $(this).offset().left;
        var newHeight = $(this).outerHeight()
        var newWidth = $(this).outerWidth()
        var newClass = $(this).attr('class');
        var newId = $(this).attr('id');

        var newDiv = document.createElement('div');
        $(newDiv).attr('class', newClass);
        $(newDiv).attr('id', newId);
        $(newDiv).css({
            position: 'absolute',
            top: newTop,
            left: newLeft,
            height: newHeight,
            width: newWidth,
            'background-color': 'transparent',
            'z-index': 1000
        })

        $(newDiv).attr('delete','delete')

        $(newDiv).html('');

        $(newDiv).prependTo('body');

    })


}

function killInvisiClones() {
    $('*[delete]').remove();
}

所以通过对你想要激活的DOMS运行函数来启动

$('.keepAlive').invisiClone();

这在技术上是不好的做法，因为它复制了 ID，但是通过将它们添加到正文中，它们应该占据先前存在的 DOM 的主导地位。通过运行删除覆盖后杀死它们非常重要：

killInvisiClones()

同样，这在技术上不是最正确的方法，但它相对普遍。

Answer 3

你可以使用 CSS3 的最新属性——pointer-events: none;

此属性告诉浏览器忽略所有鼠标事件并将它们发送到下面的层。