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

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

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/

的工作演示

注意：我在mouseout上完全删除.alt div，否则它会一遍又一遍地附加alt文本。

更好的解决方案可能是预先创建所有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

有两个问题：

您要将div附加到所有li元素而不是当前元素（请参阅@ cdeszaq的回答）
您在div上隐藏了新添加的mouseleave，隐藏了所有未来的.alt元素。您应该使用.remove()代替mouseout

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

5 个答案: