Question

A client wants the alt tag text to appear when hovered (and can’t be convinced it should be title, alas). This is as far as I got, but I need only the hovered img’s alt tag to display, rather than all of them. I tried removing ‘each’ but it broke (I know I’m not very good at this). How do I fix it:

$("ul.thumb li img").hover(function() {
  $(this).each(function(i, ele) {
  $("li").append("<div class=alt>"+$(ele).attr("alt")+"</div>");
      $(this).mouseleave(function(event){
      $(".alt").css('display','none');
});
});
});

Here it is in a fiddle

Answer 1

$("ul.thumb li img").each(function() {
    $(this).parent('li').append($("<span/>").text($(this).attr("alt")).hide());
}).hover(function(){
  $(this).parent('li').children('span').show();
},function(){
  $(this).parent('li').children('span').hide();
});

DEMO