1

我的页面如下所示：

<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;
}
4

2 回答 2

1

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

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

阅读 Lea Verou 的优秀CSS 秘密指南了解更多信息

编辑：

如果失败，请尝试添加：

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

我在自己的应用程序中对此进行了测试。希望能帮助到你。

于 2013-08-07T14:22:34.550 回答
1

只需position: relative;在您的 .ui-content div 上放一个。

z-index 仅适用于定位元素，因此当您定位 div 时，它将计算 z-index 并且您的链接将是可点击的。

这是一个小提琴：http: //jsfiddle.net/uBuSE/

于 2013-08-07T14:33:29.107 回答