Добавьте заголовок 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;