標題DIV上側翻擴大與jQuery

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

我稍加修改你的CSS通過添加.caption類和.hover類。我還修改了jQuery的很多，使其更具可讀性（對我來說，哈哈，這樣我就可以修復它）：

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

現在......我並不想使它看起來驚人，因爲這是你的工作。儘管如此，它的功能仍然如你所願。

Answer 2

您的圖像使用絕對定位。所以div出現在圖像後面。如果你想讓它出現在前面，你需要做一個CSS更改。讓我看看我能不能找到你想要的東西。

你jQuery是壞：改變

var title = this.alt; 

到

var title = $(this).alt;