为什么不透明度会否定指针事件？答案

【问题标题】：Why does opacity negate pointer events?为什么不透明度会否定指针事件？
【发布时间】：2012-11-30 13:45:24
【问题描述】：

在以下设置中，为什么点击事件（和任何其他指针事件）没有被触发？

如果您删除 opacity: 0.5 行，它将正常工作。

为了后代，万一 jsFiddle 出现故障（12 月 21 日即将到来）：

HTML：

<div>
    <a>Click</a>
    <p>Paragraph</p>
</div>

CSS：

div { position: relative; margin: 40px; }
a { position: absolute; top: 0; right: 0; }
p { opacity: 0.5; }

JS：

$(document).ready(function(event) {
    $("a").click(function(event) {
        alert("Alert");
    });
});

（在最新的稳定版 Chrome 和 Firefox 中测试）

【问题讨论】：

这很奇怪！我也想知道为什么。

标签： css opacity

【解决方案1】：

a 元素位于 p 之前，请注意 p 的宽度为 100%。这意味着p 实际上高于a。

您可以将 a 元素的 z-index 更改为 0 以上的值 (http://jsfiddle.net/523ve/5/) 或在 HTML 中交换 p 和 a 以便 a 出现在p (http://jsfiddle.net/523ve/3/) 之后。

我希望我写的东西有意义；）。

【讨论】：

-1，这解释了为什么段落应该阻止锚点，但没有解释为什么不透明度会影响这种行为。
对不起，我正在写。
我明白了。问题是：“在以下设置中，为什么点击事件（和任何其他指针事件）没有被触发？”。据我了解，我已经完整地回答了这个问题。
我已经删除了我的反对票，因为这不是错误，但它不完整，因为它无法回答为什么 opacity:1 不会阻止但不透明度小于 1。
哦，酷。 OP 使用了我首先建议的z-index 解决方案。继续投票。 [叹气]

【解决方案2】：

"由于不透明度小于 1 的元素是由单个屏幕外图像合成的，因此它之外的内容无法分层它内部的内容片段之间的 z 顺序。出于同样的原因，实现必须为任何元素创建一个新的堆叠上下文不透明度小于 1。如果不透明度小于 1 的元素是未定位，实现必须绘制它创建的层，在其父堆叠上下文中，以相同的堆叠顺序如果它是带有z-index: 0 和 opacity: 1..."

http://www.w3.org/TR/css3-color/#transparency

编辑：

此外，您的特定示例的 <p> 元素与 <a> 重叠。

http://jsfiddle.net/523ve/4/

因此，您可以通过移动<a> 使其不会干扰来解决此问题，或者使用z-index 重新调整堆叠顺序。后一个选项可能有跨浏览器问题，但我没有测试过。我建议重构您的 HTML，使这两个元素不会相互重叠。

编辑 2：

这是一个相关的 SO 问题，但接受的答案不正确。

What has bigger priority: opacity or z-index in browsers?

【讨论】：

+1 我宁愿看到这个没有斜体段落的...
@NullPointer，已注明并已修复。虽然可以在源链接上阅读相同的段落。
很好的答案、解释和参考。我通过将z-index 设置为 1 来修复它。

【解决方案3】：

这一行你就明白了

opacity CSS 属性指定元素的透明度，即元素背后的背景覆盖的程度。

使用此属性的值不同于 1 会将元素置于新的堆叠上下文中。

source :MDN

这里p 与a 重叠，因此将p 的宽度设置为不重叠a 或将a 设置为更高z-index

【讨论】：