3

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

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

4

3 回答 3

5

“由于不透明度小于 1 的元素是从单个屏幕外图像合成的，因此它之外的内容不能按 z 顺序在其内部的内容之间分层。出于同样的原因，实现必须为任何内容创建新的堆叠上下文opacity 小于 1 的元素。如果 opacity 小于 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 question，但是接受的答案不正确。

什么更重要：浏览器中的不透明度或 z-index？

于 2012-12-12T19:12:38.243 回答
2

你可能会明白这一行

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

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

来源：MDN

这里p是重叠a的，所以要么将宽度设置p为不重叠a，要么设置a得更高z-index

于 2012-12-12T19:11:23.547 回答
-1

a元素出现在 之前，p请注意它p是 100% 宽的。这意味着它p实际上是 ABOVE a。

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

我希望我写的东西有意义;)。

于 2012-12-12T19:12:41.950 回答