使用此显示图像的 alt 标签 - jquery

Question

客户希望在悬停时显示 alt 标签文本（并且无法确信它应该是标题，唉）。这是我所得到的，但我只需要显示悬停的 img 的 alt 标签，而不是全部。我尝试删除“每个”，但它坏了（我知道我对此不太擅长）。如何修复它：

$("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');
});
});
});

这里是小提琴

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();
});

演示

Answer 2

您可以分两步完成：

// create the divs
$("ul.thumb li img").each(function() {
    $('<div />', {
        class: 'alt', 
        text: $(this).attr("alt")
    }).appendTo($(this).parent());
});

// toggle the divs visibility
$("ul.thumb li img").hover(function() {
    $(this).parent().children('.alt').toggle();
});
// OR attach the handler to the li element instead:
$("ul.thumb li").hover(function() {
    $(this).children('.alt').toggle();
});

DEMO

Answer 3

您不需要 .each()，并且可以将 mouseleave 作为 .hover() 的第二个参数进行处理：

$("ul.thumb li img").hover(function() {
    console.log(this);
    $(this).parent().append("<div class=alt>" + $(this).attr("alt") + "</div>");
}, function() {
    $(this).siblings('.alt').remove();
});

工作演示在 http://jsfiddle.net/alnitak/dPVCN/

注意：我删除了 .alt div完全在鼠标移开时进行，否则它会一遍又一遍地附加替代文本。

更好的解决方案可能是预先创建所有 alt div，然后根据需要使用 .show() 或 .hide() 它们。

Answer 4

TheSuperTramp 的解决方案是最好的方法，但我稍微调整了它以提高性能。

$('img', 'ul').each(function() {
    $(this).parent().append('<div style="display:none">' + this.alt + '</div>'); 
}).bind({
    mouseenter: function() {
       $(this).siblings('div').show();
    },
    mouseleave: function() {
        $(this).siblings('div').hide();
    } 
});

演示：http://jsfiddle.net/5dxhC/1/

Answer 5

有两个问题：

1. 您将 div 附加到所有 li 元素，而不仅仅是当前元素（请参阅@cdeszaq的答案）
2. 您隐藏了新添加的 div on mouseleave ，隐藏所有未来的 .alt 元素。您应该在 mouseout 上使用 .remove() 而不是 css 属性