点击一个元素,影响其背后的内容

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:这是重叠"容器内容"的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.