html - 如果父元素使用全屏伪元素，如何启用链接？

Question

我的页面是这样的:

<div.ui-page>
  <div.ui-content>
    <a href="foo.html">
  </div>
</div>

在我的页面上，我设置了一个全屏水印，如下所示:

/* Watermark */
.ui-page:before {
    background: url("../img/foo.png") no-repeat center center;
    position: absolute;
    content: "";
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* transparency */
    opacity: .2;
    /* grayscale */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
}

效果很好。问题是，我的链接不再可点击。

我尝试移动 :before 伪元素以及不同程度的 z-index。都不起作用。奇怪的是，这似乎只与基本链接有关。包含在其他元素中的任何链接都可以正常工作(我使用的是 jQuery Mobile，所以链接在 ul 工作)

问题:
如果父元素或包含链接的元素使用 CSS 伪元素，我如何保持普通链接可点击/可用？

谢谢!

解决方案:
这是我的最终代码。 请注意，我必须切换到 ui-page-active - 否则它仅适用于 jQuery Mobile 中加载的第一个页面。

.ui-page-active:before {
    background: url("../img/foo.png") no-repeat center center;
    background-attachment: fixed;
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    /* transparency */
    opacity: .2;
    /* grayscale */
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
    filter: gray;
    -webkit-filter: grayscale(100%) brightness(10%) contrast(100%);
}
/* disable pointer events on the background... */
.ui-page.ui-page-active:before {
    pointer-events: none;
}

Answer 1

这个方案不是100%跨浏览器的，但是可以添加如下代码让鼠标点击元素:

.ui-page:before {
  pointer-events:auto;
}

阅读 Lea Verou 的精彩 CSS secrets更多信息指南

编辑:

如果失败，尝试添加:

.ui-page { pointer-events: none; }
.ui-page:before { pointer-events: none; }

我在自己的应用程序中对此进行了测试。希望对您有所帮助。