单击一个元素，影响其背后的内容[重复]

Question

所以，我打算为我的网站制作一个覆盖物，其中一个元素固定在网站上并放置在所有内容之上。但这意味着元素后面的任何其他内容都不会受到影响。

这里有一个JSFiddle 重现了这个问题。

您会注意到无法突出显示黑色文本，并且 JavaScript 事件不会触发。

---

这是我用来创建此问题的 CSS + HTML：

HTML

<div id="main-container">
    <div id="container-content">You can't highlight me! D:</div>
    <div id="container-fixed"><div style="margin:90px auto;background:red;width:40px;height:40px;"></div>You cannot highlight the text behind this DIV.  It also doesn't fire click events.</div>
</div>

main-container：这里保存着内容。

container-content：这是固定DIV后面的内容

container-fixed：这是重叠“container-content”的DIV

CSS

#main-container {
    width: 90%;
    margin: 5%;
    position: relative;
    height: 500px;
    overflow: auto;
}

#container-content {
    width: 100%;
    height: auto;
}

#container-fixed {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    color: red;
}

---

我正在努力实现的目标是否可能？允许使用 CSS 和 JavaScript (jQuery) 答案。

Answer 1

使用 CSS pointer-events:

除了指示该元素不是鼠标事件的目标之外，值 none 还指示鼠标事件“穿过”该元素并以该元素“下方”的任何内容为目标。

#container-content {
    width:100%;
    height:auto;
    pointer-events: none;
}

如果您需要 IE 10 及更低版本的支持，请联系polyfill。

Answer 2

这应该可以解决问题：

#container-fixed{
    pointer-events: none;
}

pointer-events: none; 禁用目标元素上的鼠标交互。
请记住，11 之前的 IE 版本不支持此 CSS 属性。

Answer 3

对于 IE10> 浏览器，您必须通过更高级别的元素计算要单击的元素的位置，然后执行您想做的事情。例如http://jsfiddle.net/hm6Js/7/

topo=$('#container-content').offset().top;
left=$('#container-content').offset().left;
right=$('#container-content').offset().left+$('#container-content').width();
bottom=$('#container-content').offset().top+$('#container-content').height();
$(document).click(function(e){
    if(e.pageX>=left && e.pageX<=right && e.pageY>=topo && e.pageY<=bottom){
        alert("This doesn't work.");
    }
});

正如您在此示例中看到的，警报仅在您单击 #container-content 元素时触发。

注意：

如果要点击的元素很多，这不是最有效的方法。

Answer 4

您可以使用 css 的指针事件来做到这一点。 将 #container-content 的 css 更改为此

#container-content{
width:100%;
height:auto;
}

#container-fixed {
width:100%;
height:100%;
position:absolute;
top:0; left:0;
color:red;

    pointer-events: none /*the important thing*/
}

工作小提琴here

可以找到指向指针事件更多信息的链接here 这可能不是跨浏览器，所以另一个家伙建议如果这是一个问题）使用 javascript，通过层转发鼠标事件。完整答案可以找到here

Answer 5

你可以通过添加z-index来做到这一点

#container-content {
 width:100%;
 height:auto;
  z-index:999;
  position:absolute;
}