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

Question

在以下设置中,为什么click事件(和任何其他指针事件)不会被触发？

如果删除该opacity: 0.5行,它将正常工作.

http://jsfiddle.net/523ve/

对于后人,如果有史以来的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......"

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

编辑:

此外,您的特定示例具有与<p>元素重叠的元素<a>.

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

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

编辑2:

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

什么有更高的优先级:浏览器中的不透明度或z-index？