徘徊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时淡入广告信息

回答

相关问题