圖像疊加幫助 - 它全部疊加在一個圖像上！

我有一組四個圖像，我的功能目標是當您將鼠標懸停在圖像縮略圖上方時，它會應用覆蓋圖，其中包含一些可以單擊的信息。圖像疊加幫助 - 它全部疊加在一個圖像上！

爲了給你一個想法，看看這個圖片：

image http://i51.tinypic.com/28u5nrt.jpg

我已經得到了基本下跌，但目前覆蓋左上角圖像中只是堆積。不知道如何解決它，所以我想知道你們是否可以提供幫助。

這裏的網站： http://lab.albionmedia.biz/clients/silverdale/

看一看我的代碼，看看你的想法！

來源

2010-10-27 Chrish

我不知道你現在的代碼是怎麼樣的，但你應該玩onMouseOver和onMouseOut事件，並添加/刪除css類，這將是顯示額外內容的響應（默認不可見/禁用） – zgorawski 2010-10-27 12:11:03

不確定你是否已經解釋過你自己清楚。你想讓4組中的每個縮略圖在懸停時都顯示疊加層？你想僅用CSS還是用已經加載的jQuery來做到這一點？ – 2010-10-27 12:13:40

我希望能用CSS來做，然後讓jQuery來照顧翻滾的東西。 – Chrish 2010-10-27 12:17:02

div的現在塊級元素，他們有沒有高度，因爲它們是由彩車/絕對定位的元素填充。

變化：

#columns .column .image { 
    position:relative; 
width:100%; 
}

要：

#columns .column .image { 
    float:left; 
    position:relative; 
}

，你應該得到的東西更接近你想要什麼。這可能需要一些調整。

來源

2010-10-27 12:10:36

完美的工作，感謝您的幫助！需要像你說的那樣調整，但現在全部排序。 – Chrish 2010-10-27 12:18:07

邊緣底部：4px使它已經更漂亮:) – 2010-10-27 12:18:51

是的，這就是我所做的！我只需要現在就執行jQuery位 – Chrish 2010-10-27 12:52:00

沒有觸及CSS，你可以讓jQuery爲你做所有事情。

$('.overlay').fadeTo(0,0); //hide the images to start with 
$('.image').hover(function(){ 
     $(this).children('.overlay').fadeTo(200,1)}, 
    function(){ 
     $(this).children('.overlay').fadeTo(200,0)} 
);

來源

2010-10-27 12:04:51

這工作真的很好，謝謝你的幫助哥們，保持它 – Chrish 2010-10-27 13:01:17

圖像疊加幫助 - 它全部疊加在一個圖像上！

回答

相關問題