Question

在以下设置中，为什么click事件（以及任何其他指针事件）不会被触发？

如果您移除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中测试）

Answer 1

“由于不透明度小于1的元素是从单个屏幕外图像合成的，因此其外部的内容无法分层内部内容之间的z顺序。出于同样的原因，实现必须为任何元素创建新的堆栈上下文不透明度小于1的情况。如果不透明度小于1的元素是没有定位，实现必须绘制它创建的图层，在其父堆叠上下文中，以相同的堆叠顺序如果它是z-index: 0和opacity: 1的定位元素，则会被使用 <p> ...“

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

修改：

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

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

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

编辑2 ：

这是一个相关的SO问题，但是接受的答案是错误的。

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

Answer 2

你可能会理解这一行

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

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

source :MDN

此处p重叠a，因此请将p的宽度设置为不重叠a或将a设置为更高z-index < / p>

Answer 3

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/）。

我希望我所写的内容有意义;）。

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

3 个答案: