Javascript 如何在img上覆盖一个div，并在mouseover上显示另一个div？

我有一个列表缩略图，当点击时会显示更大的对应项。我想在缩略图的底部边缘以div的形式显示图像标题。此外，当鼠标移动到缩略图上时，它会在整个缩略图上显示第二个div（包含文本）

最好的方法是什么？如果需要js库，最好使用jquery

<div>
    <img id="image-1" src="yourimage.png" title="My title" />
    <p id="image-1-title"></p>
</div>


$(document).ready(function(){
    $("img[id^='image-']").each(function(i){
        var id = $(this).attr("id");
        var title = $(this).attr("title");
        $("#"+id+"-title").html(title);
    });
});


$（文档）.ready（函数（）{
$（“img[id^='image-']）。每个（函数（i）{
var id=$（this.attr（“id”）；
var title=$（this.attr（“title”）；
$（“#”+id+“-title”）.html（title）；
});
});

---

图片标题也应该如此：）

如果你准备好了，那么这里有一篇非常棒的帖子。

我不久前写了一个小插件，可以让你做你需要的事情，并带有悬停动画。它最初是用来添加悬停背景动画的，但我想它应该能够满足您的需要

    /*
     * jQuery Animate Background (v0.2)
     * Copyright (c) 2009 Mario "Kuroir" Ricalde ( http://twitter.com/exolimpo )
     * Usage:
     *  $("h1").animateBg();
     *  Con Campos Opcionales:
     *  $("div").animateBg({time:130,add:"span"});
    */
    (function($){
        $.fn.animateBg = function(opciones){
            $.fn.animateBg.defecto = {
                time : "fast", add : "span"
            };
            var config = $.extend({}, $.fn.animateBg.defecto, opciones);
            this.each(function(){
                var c = config;
                var title = $(this).attr("title");
                $(this).append("<"+ c.add +">" + title + "</"+ c.add +">").hover(function(){
                    $(this).children(c.add).fadeIn(c.time);
                },function(){
                    $(this).children(c.add).fadeOut(c.time);
                });
            });
        }
    })(jQuery);

$(document).ready(function(){
    $("#thumb-list p img").animateBg();
});

<div id="thumb-list">
    <p><img src="lol.jpg" title="My title" /></p>
</div>

/*
*jQuery动画背景（v0.2）
*版权所有（c）2009马里奥“Kuroir”里卡德（http://twitter.com/exolimpo )
*用法：
*$（“h1”）.animateBg（）；
*康康普斯Opcionales：
*$（“div”）.animateBg（{time:130，添加：“span”}）；
*/
（函数（$）{
$.fn.animateBg=函数（选项）{
$.fn.animateBg.defecto={
时间：“快”，加上：“跨度”
};
var config=$.extend（{}，$.fn.animateBg.defecto，opciones）；
这个。每个（函数（）{
var c=配置；
var title=$（this.attr（“title”）；
$（this）.append（“+title+”）.hover（函数（）{
$（this）.children（c.add）.fadeIn（c.time）；
}，函数（）{
$（此）.children（c.add）.fadeOut（c.time）；
});
});
}
})（jQuery）；
$（文档）.ready（函数（）{
$（“#拇指列表p img”）.animateBg（）；
});

抱歉，如果代码不起作用。。因为我不在家，所以无法测试