在使用jQuery展开翻转后，为图像添加标题div

Question

我正在使用这个jQuery在悬停时扩展图像：

http://jsfiddle.net/bAHXJ/

现在我想为标题添加一个div，使用标题，如下所示：

$("img").hover(function() {
    $(this).each(function(){
          var title = this.title;
          $(this).after('<div class="caption">'+ title +'</div>');
      }); 
 }); 

当我添加div时会出现在图像后面：

http://jsfiddle.net/k62NY/

我试过.append而不是.after（仍然模糊不同）并且没有出现。

在图像完成展开后，如何使图片div显示在展开的图像下方？

Answer 1

我通过添加.caption类和.hover类略微修改了CSS。我还修改了你的jQuery以使其更具可读性（对我而言，哈哈，以便我可以修复它）：

http://jsfiddle.net/k62NY/4/

现在......我并没有试图让它看起来令人惊讶，因为这是你的工作。但功能上，它可以按照您的意愿。

Answer 2

您的图片使用绝对定位。因此div出现在图像后面。如果您希望它出现在前面，则需要进行CSS更改。让我看看我是否可以得到你想要的小提琴。

你的jquery很糟糕：改变

var title = this.alt; 

到

var title = $(this).alt;