懸停時的背景覆蓋

Question

有沒有可能像這樣的標記，但懸停的背景覆蓋？

<figure class="gallery-item"> 
    <div class="gallery-icon landscape"> 
     <a href="www.google.com"> 
      <img src="http://placehold.it/300x300" /> 
     </a> 
    </div> 
</figure> 

我試圖懸停將background-color: #333上.gallery-icon，但似乎只有像邊框底部？

http://codepen.io/filaret/pen/NRpVyr

Answer 1

你絕對是在正確的軌道上。由於您正在使用圖標的:after元素，因此您應該單獨放置該元素，因爲它已經定位並定義了它自己的寬度+高度（基於圖標）。

:after選擇器正確定位的原因是因爲它不依賴其父容器尺寸。你只能從頂部和左邊把它作爲絕對的，這很好。但它不知道應該有多高，因爲它的父母沒有確定的身高！如果使用絕對定位，則需要定義父容器的尺寸，以便孩子知道其界限。

所以第一關，.gallery-icon已經是一個塊元素，所以你並不需要定義它的寬度（其已100％通過自然），只是高度：

.gallery-icon { 
    position: relative; 
    height: 100%; 
} 

其次，你應該使用一個:before元素來定義背景，讓你不必亂用:after圖標：

&:before { 
    content: ''; 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    top: 0; 
    left: 0; 
    background-color: #333; 
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
} 

現在，你只需要添加懸停不透明度的變化！

&:hover { 
    .gallery-icon { 
     &:before { 
      opacity: .5; 
     } 
     &:after { 
      opacity: 0.6; 
     } 
    } 

希望幫助，這裏是一個codepen叉掉原來的：http://codepen.io/anon/pen/JRWqxX

編輯：我也注意到，您的img標籤使其進入下面的容器的視覺底部，速戰速決只是補充：

.gallery-icon { 
    img { 
     display: block; 
    } 

Answer 2

圖像（http://placehold.it/300x300）具有堅實的背景色，無？

這會阻止背後發生的任何事情。

Answer 3

您需要了解您的標記作品。您的圖像將顯示在所有內容之上，並且當您在.gallery圖標上放置背景色時，背景色將位於圖像下方，並且由於錨鏈接沒有寬度和高度，因此只需要一點點部分位，這就是爲什麼它顯示邊框底部。

要在懸停時創建背景覆蓋圖，您需要將其放置在圖像頂部。

使用僞元素來創建一個背景疊加：

&:hover .gallery-icon { 
    &::before { 
    content: ''; 
    background-color: #333; 
    display: block; 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    opacity: 0.2; 
    } 
} 

僞元件具有絕對的位置，以便將顯示在圖像的頂部。頂部，左側，右側和底部0來告訴僞元素將它自我拉伸爲高和寬度與父元素一樣寬。

希望這會有所幫助。

Answer 4

我試着簡化一點代碼。我希望這是你試圖達到的目標。

訣竅是將a作爲獨立元素放置到img。

<figure class="gallery-item"> 
    <a href="www.google.com"></a> 
    <img src="http://placehold.it/300x300"> 
</figure> 

http://codepen.io/anon/pen/LRWoaR