圖像懸停時會覆蓋黑色，當我們進入頁面時應該保持活動狀態

我正在處理四張圖片，每張圖片都有一個鏈接，點擊鏈接後會轉到另一頁。現在我的問題是，我想讓懸停在圖像上的黑色覆蓋圖，當圖像被點擊並帶我們到另一個頁面，它仍然活躍與覆蓋。圖像懸停時會覆蓋黑色，當我們進入頁面時應該保持活動狀態

我有四個圖像在首頁和內頁相同的圖像。

下面是HTML：

<ul class="thumbnails"> 
    <li class="span3"> 
     <a href="#"> 
      <div id="ImageHover"> 
       <img src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png" alt="" /> 
      </div> 
     </a> 
    </li> 
</ul>

這裏是CSS：

<style> 
#ImageHover img:hover 
{ 
    background-color:rgba(0,0,0,0.6); 
} 
</style>

它爲我工作，但覆蓋不超過image.and未來我也想使圖像保持當我們進入與該圖像鏈接的頁面內時，覆蓋層處於活動狀態。

的第一個問題就解決了，當頁面以使圖像活躍，覆蓋裏面我已經做到了這一點 - > 下面是HTML：

<div id="ImageHover" class="active"> 
<img alt="" src="http://209.236.116.120/~sciallin/it/backend/wp-content/uploads/2014/07/model23.png"> 
</div>

這裏是CSS：

#ImageHover.active { 
    background : rgba(0, 0, 0, 0.5); 
    bottom : 0; 
    content : ' '; 
    left : 0; 
    position : absolute; 
    right : 0; 
    top : 0; 
}

但它使圖像消失。當我阻止位置它回來，但圖像的背面。我現在應該怎麼做。

來源

2014-09-02 Montiyago

*「它爲我工作」* - 什麼工作？所以當圖片被點擊時，你正在重定向到另一個頁面？如果是這樣，顯然你不能保持當前頁面的覆蓋。您可以在加載的頁面中顯示疊加層。 – 2014-09-02 07:50:32

@TJ：沒有親愛的，這是不工作，但現在它的工作。我的下一個問題是使該圖像在頁面內疊加。 – Montiyago 2014-09-02 07:54:45

@TJ：通過SimonR的解決方案解決了覆蓋問題的第一個問題。 – Montiyago 2014-09-02 07:57:06

將您當前的CSS替換爲以下內容並將.active類應用於您的框。

#ImageHover { 
    position: relative; 
} 

#ImageHover:hover:after, 
#ImageHover.active:after { 
    background : rgba(0, 0, 0, 0.5); 
    position: absolute; 
    top: 0; 
    left: 28px; 
    bottom: 15px; 
    right: 28px; 
    content: ''; 
}

我修改了位置，以便完美勾勒出您的框，但如果您願意，可以將其更改回去。

來源

2014-09-02 08:47:36 Eliel

現在多數民衆贊成我正在尋找它甚至解決圖像寬度因爲我的形象是在兩邊的空白空間的感謝。感謝一噸珍貴的寶貴的幫助。 – Montiyago 2014-09-02 10:09:02

本（或類似的東西）應該給你，你是後，在現代瀏覽器都至少效果：

#imageHover { 
    position : relative; 
} 
#imageHover:hover:after { 
    background : rgba(0, 0, 0, 0.6); 
    bottom : 0; 
    content : ' '; 
    left : 0; 
    position : absolute; 
    right : 0; 
    top : 0; 
}

要得到的效果結轉，表明用戶是你一個給定的網頁上需要在頁面上的相關#imageHover上有一堂課。然後，您可以在懸停樣式之後添加#imageHover.active作爲額外的規則。作爲一個方面說明，您可能想要使用類而不是ID，或者您需要爲每個imageHover元素添加CSS規則。

編輯：.active類的選擇器也將需要:after僞元素。 CSS的規則是這樣的：

#imageHover:hover:after, 
#imageHover.active:after { 
    /* ...css... */ 
}

道歉沒有說清楚。

Further reading on pseudo elements（這些東西巖！）

來源

2014-09-02 07:48:21 SimonR

：多數民衆贊成在理想的工作。現在我的下一個問題是，當用戶點擊該圖像時，它將他們帶到anotjer page.where再次放置這些圖像。現在我希望該圖像與overlay.h活動我可以實現這一點。 – Montiyago 2014-09-02 07:53:18

您將'.active'類添加到與當前頁面對應的框中。 – Eliel 2014-09-02 08:07:26

您是否將其添加到「sc23小屋」頁面上的第一張圖片上？ – Eliel 2014-09-02 08:22:22

以獲取圖像加載下一頁時要積極媒體鏈接，你應該用散列屬性加載頁面。

比方說，你有4張照片，每一個不同的ID，在一個頁面調用pictures.html：

<img id="image1" class="imageOverlay" src="" /> 
<img id="image2" class="imageOverlay" src="" /> 
<img id="image3" class="imageOverlay" src="" /> 
<img id="image4" class="imageOverlay" src="" />

爲了與第3圖像主動加載頁面，你叫圖片。HTML＃圖像3

然後，在你的CSS：

.imageOverlay:active { 
    /* CSS for image overlay */ 
}

這CSS將適用於畫面具有對應於URL的散列的ID。您可能會遇到的問題是瀏覽器將在頁面加載時滾動到該圖像。這可能是你不想要的。

我不認爲在CSS中有避免這種行爲的方法。

來源

2014-09-02 07:58:29 Manuszep

圖像懸停時會覆蓋黑色，當我們進入頁面時應該保持活動狀態

回答

相關問題