如何在父元素使用全屏僞元素時啓用鏈接？

我的頁面看起來是這樣的：如何在父元素使用全屏僞元素時啓用鏈接？

<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 –

如何在父元素使用全屏僞元素時啓用鏈接？

回答

相關問題