Php 悬停unqiue div时，广告信息淡入

我有许多图像，每个图像都有自己独特的id。每个图像都是指向其广告的链接。我想添加一个悬停fadeIn效果，在图像顶部显示有关该广告的一些信息

我试图做点什么，但我认为我没有采取正确的方法。 我觉得有一个更好的方法让div位于顶部，而不是做保证金：-105px0； 此外，我想不出如何告诉它“如果id=1悬停，fadein id=fade1，否则淡出”

动态div（在php中）

CSS

.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);
}

---

感谢您的帮助

您可以使用

背景图像

并将图像放置在

div

元素中，而不是在CSS中弄乱边距，如下所示：

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

HTML

然后，使用

.hover（）

和

.children（）

可以隐藏/显示

div

的内容，如下所示：

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

这样，您就不必将id和类组合起来，只需在父

div

s上使用一个类

---

下面是一个例子：

只是提醒一下，如果你不使用HTML5，

id

s不能以数字开头。如果你正在使用HTML5，那么不用担心。是的，我正在使用HTML5，但无论哪种方式，这都只是为了我的问题。我使用的名称略有不同。我只是想让它看起来干净一点，我有一个while循环，从数据库中检索带有图像的广告，所以我不能像那样把它放在css中。你知道如何动态处理数据库吗？什么数据库？您目前是如何动态地执行此操作的？您可以使用设置的任何变量来提取图像，并在CSS中使用该变量，但这完全取决于您的设置。我认为这可能最适合回答另一个问题。

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

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

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