徘徊unqiue div時淡入廣告信息

我有許多圖像，每個都有自己的唯一ID。每張圖片都是其廣告的鏈接。我想添加懸停淡入效果，該效果將在圖片頂部顯示有關該廣告的一些信息。徘徊unqiue div時淡入廣告信息

我試圖做一些事情，但我認爲我沒有采取正確的做法。我覺得有一個更好的方式來獲得div頂部，而不是做margin：-105px 0 0; 另外，我想不出如何告訴它：「如果ID = 1懸停，淡入ID = fade1，否則淡出」

動態格（在PHP）

<img src="test.jpg" class="ad_cover" id="1"> 
<div class="ad_fade" id="fade1"></div> 

<img src="test.jpg" class="ad_cover" id="2"> 
<div class="ad_fade" id="fade2"></div> 

<img src="test.jpg" class="ad_cover" id="3"> 
<div class="ad_fade" id="fade3"></div>

JQUERY

$('.ad_cover').mouseover(function() { 
    var ad_id = this.id; 
    $('#fade'+ad_id).fadeIn('slow'); 
}); 
$('.ad_cover').mouseout(function() { 
    var ad_id = this.id; 
    $('#fade'+ad_id).fadeOut('slow'); 
});

ç SS

.ad_cover{ 
    width:100px; 
    height:100px; 
} 
.ad_fade{ 
    display:none; 
    position:absolute; 
    margin:-105px 0 0; 
    width:100px; 
    height:100px; 
    background:rgba(255,255,255,0.8); 
}

所有幫助表示感謝！

來源

2014-04-14 Gadgetster

剛擡起頭，如果你不使用HTML5，'id's不能以數字開頭。如果您使用的是HTML5，那麼不用擔心。 –

是啊我使用HTML5，但無論哪種方式，這只是我的問題。我使用的名稱稍有不同。只是希望它在這裏看起來乾淨 – Gadgetster

而是在你的CSS利潤率搞亂的，你可以使用background-image並把圖像您div元素的內部，像這樣：

HTML

<div class="ad"> 
    <img src="..."/> 
</div> 
<div class="ad"> 
    <img src="..."/> 
</div> 
<div class="ad"> 
    <img src="..."/> 
</div>

CSS

.ad img { 
    width:100px; 
    height:100px; 
    display:none; 
} 
.ad { 
    width:100px; 
    height:100px; 
    background-image:url(...); 
    display: inline-block; 
}

然後，使用.hover()和.children()，您可以隱藏/顯示div的內容，如s ○：

$('.ad').hover(function() { 
    $(this).children('img').fadeIn('slow'); 
}, 
function() { 
    $(this).children('img').fadeOut('slow'); 
});

這樣，您就不必亂用結合ID和班級，只需要使用一個類的父div秒。

這裏是它在行動小提琴：http://jsfiddle.net/9zP7g/

來源

2014-04-14 18:39:04

事情是我有一個while循環檢索與數據庫中的圖像的廣告，所以我不能把這個像這樣的CSS。 – Gadgetster

任何想法如何動態地與數據庫做到這一點？ – Gadgetster

什麼數據庫？你目前如何動態地做這件事？你可以使用你設置的任何變量來拉取圖像，並在你的CSS中使用它，但這一切都取決於你的設置。我認爲這可能最適合另一個問題。 –

徘徊unqiue div時淡入廣告信息

回答

相關問題