我的页面是这样的:
<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;
}
最佳答案
这个方案不是100%跨浏览器的,但是可以添加如下代码让鼠标点击元素:
.ui-page:before {
pointer-events:auto;
}
阅读 Lea Verou 的精彩 CSS secrets更多信息指南
编辑:
如果失败,尝试添加:
.ui-page { pointer-events: none; }
.ui-page:before { pointer-events: none; }
我在自己的应用程序中对此进行了测试。希望对您有所帮助。
关于html - 如果父元素使用全屏伪元素,如何启用链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18105816/