如何在父元素使用全屏伪元素时启用链接？

我的页面看起来是这样的：如何在父元素使用全屏伪元素时启用链接？

<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索引的沿。一切都不起作用。奇怪的是，这似乎只涉及基本的链接。包裹中的其他元素的任何链接做工精细（我使用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; 
}

来源

2013-08-07 frequent

该解决方案是不是100％的跨浏览器，但你可以添加以下代码，使鼠标的点击元素：

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

阅读利·贝罗出色的CSS secrets指南了解更多信息

编辑：

如果失败，尝试添加：

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

我在自己的应用程序测试了这一点。希望能帮助到你。

来源

2013-08-07 14:22:34 stephenmurdoch

不是工作，而是为链接非常感谢！ – frequent

我更新了我的答案。 – stephenmurdoch

好主意。让我尝试。 – frequent

只要把position: relative;您的.ui内容股利。

的z-index只适用于定位的元素，所以当你定位你的DIV，它会计算的z索引和链接将可以点击。

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

来源

2013-08-07 14:33:29

好看。谢谢。好主意。 – frequent

任何想法如何给元素“位置”而不明确声明'pos：relative'？ – frequent

只有你可以给他们的位置，使z-index是pos：相对的，绝对的或固定的。 http://www.w3schools.com/cssref/pr_pos_z-index.asp –

如何在父元素使用全屏伪元素时启用链接？

回答

相关问题