有人能告訴我為什么當我的鏈接下面有一個 div 時我的鏈接不可點擊嗎？

Question

我正在為我的網站制作一個小部件，顯示作者及其社交鏈接。 它工作正常，直到我在混合中添加了模糊的背景 div。 關於它的一些東西不再讓我點擊鏈接。 我試過添加 z-index 值，但這似乎沒有幫助。 查看我的小提琴以了解我的問題。 下面是有問題的類...

.social_artist_image_wrapper {
    position:absolute;
    height:126px;
    width:580px;
    background-size:cover;
    opacity:0.3;

    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    -o-filter: blur(3px);
    -ms-filter: blur(3px);
    filter: blur(3px);  
}

Answer 1

因為具有position:absolute （或除static之外的任何元素）的元素被放置在position:static元素的頂部，除非它們具有負z-index 。

嘗試放置position:relative對於您的內部區域，加上半透明的背景顏色：演示

Answer 2

我認為這是因為你的 div 不在它下面，它在它的上面。 這是因為您使用的是position: absolute 。 您可能可以通過position:relative實現您正在尋找的東西。

Answer 3

更改您的 CSS 以具有以下內容：

.social_artist_text_wrapper a {
    color:#bbb;
    text-shadow:0px 0px 5px #000;   
    position: relative;
    z-index: 2;
}

正如其他人所說，這是因為您絕對定位了背景圖像。 因此，為了讓其他元素在它前面呈現，您需要設置z-index屬性，該屬性僅在position屬性不是static時才有效。

更新了小提琴。

Answer 4

將此樣式添加到“.social_artist_image_wrapper”類

pointer-events:none;

缺少 IE 支持，因此上面的定位答案可能更適合您的需求（除非您不需要支持 IE8 或 IE9）