a：因z-index而停止工作

我購買了一個主題，並試圖對其進行修改，以便主頁上的某些圖像呈現黑白色，並且當您懸停時，它們會返回它們的顏色。由於z-index afaik，將鼠標懸停在圖像上沒有任何影響。a：因z-index而停止工作

.boxies { 
    filter: url(filters.svg#grayscale); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
} 

.boxies:hover{ 
    filter: none; 
    -webkit-filter: grayscale(0); 
} 

img{ 
    display: block; 
    position: relative; 
    width: 100%; 
    z-index: 10; 
} 

.front_holder { 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 24; 
    opacity: 1; 
    filter: alpha(opacity = 100); 
    overflow: hidden; 
    padding: 5px; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    -webkit-transform: translateZ(0px); 
} 

<img src="relaxation.jpg" alt="" class="boxies"> 
<div class="front_holder"> 
    <a class="qbutton small" href="/manicure/" target="_self" style="background-color: transparent;height: 46px;line-height: 46px;">RELAXATION</a> 
</div>

當我禁用在Chrome檢查「front_holder」的z指數，圖像懸停的作品，因爲它應該。你可以看到這裏發生了什麼：http://itlive.ca/deleteme/（主頁上的6個圖像）。

任何幫助將不勝感激。鮑勃:)

來源

2015-04-23 bob32

，這只是因爲front_holder元素的您的z-index比圖像大，所以你只需要你的懸停事件轉到父你的img和你的front_holder

.q_image_with_text_over:hover .boxies{ 
    filter: none; 
    -webkit-filter: grayscale(0); 
}

來源

2015-04-23 04:27:01

你可以改變這樣的：

.q_image_with_text_over:hover img{ 
    filter: none; 
    -webkit-filter: grayscale(0); 
}

來源

2015-04-23 04:17:59

試試吧。使用另一個標籤扭曲img。

<a href="/manicure/"><img src="relaxation.jpg" alt="" class="boxies"></a>

新增CSS pointer-events: none到front_holder喜歡它。

.front_holder { 
    pointer-events: none; 
}

來源

2015-04-23 04:27:19 yip102011

感謝您花時間回答。這確實奏效，但我發現下面的答覆是一個更簡單的解決方案。 – bob32

a：因z-index而停止工作

回答

相關問題