Question

我有一个位于页面大块上方的div，这会导致div下面的内容不再可选择/可点击。

有没有办法解决这个问题？即：使div没有任何可点击的功能吗？

#page {
    width: 980px;
    padding: 0px;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
}
#overlay {
    margin: 0px;
    padding: 0px;
    height: 536px;
    width: 422px;
    position: absolute;
    top: -4px;
    right: -20px;
    background-image: url(../images/overlay_full.png);
    background-repeat: no-repeat;
    background-position: left top;
}

Answer 1

在叠加层上使用css属性“pointer-events”：

#overlay {
   pointer-events: none;
}

请参阅：HTML “overlay” which allows clicks to fall through to elements behind it

Answer 2

如果你真的希望div覆盖下面的（可点击的）东西，那么就没有办法了。一种不合时宜的方式可能是隐藏mousedown上的元素并重新显示它onmouseup：

document.body.addEventListener("mousedown", function() { getElementById("overlay").style = "display:none;" });
document.body.addEventListener("mouseup", function() { getElementById("overlay").style = "display:block;" });

但是请注意，这会导致每次mousedown重新流动，因此会达到性能。

Answer 3

您可以使用css z-index属性使可点击对象与此蒙版重叠。看看它是如何工作的：

http://www.w3schools.com/css/pr_pos_z-index.asp

Answer 4

如果您将叠加层放在容器div中，设置为：

，这是一种欺骗方法吗？

position:fixed;
overflow:display;
width:0px;
height:0px;

后来导致它没有命中区域，但仍然可见。但是我不知道这是否是跨浏览器安全的，实际上可能是错误的结果。

绝对定位div可选文本/链接

4 个答案: