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

How to use DIV overlay without losing mouse behavior in layers below?

本文关键字：情况下 DIV 覆盖 鼠标      更新时间：2023-09-26

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

<div class="overlay"></div>
.overlay {
    position: fixed; 
    top: 0px; 
    left: 0px; 
    height: 100%; 
    background: rgba(0,0,0,.5);
}

这个覆盖在其他内容之上创建了一个新的层，这是所需要的，但不幸的是，它也阻止了底层控件的鼠标行为。启用新图层后，悬停并单击基础控件不会起任何作用。

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

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

谢谢！

您可以使用CSS3的最新属性-指针事件：none；

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

刚刚写了这个。。。几乎没有经过测试。很抱歉，但我认为这是可行的。

$.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();

从技术上讲，这是一种糟糕的做法，因为它会复制身份证，但通过将其预先添加到身体上，他们应该会比以前存在的DOMs占据主导地位。在你通过运行移除覆盖后杀死它们是非常重要的

killInvisiClones()

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

不幸的是，没有。我知道做类似事情的唯一方法是通过使用半透明图像和覆盖div顶部的图像映射来伪造它，并将其全部排列起来。这显然过于复杂，你应该寻找解决方案，以其他方式实现这种覆盖效果，但它可以实现你想要的效果。

相关文章：