Question

我有以下代码，当我将鼠标悬停在超链接上时，我想显示它的图像。问题是没有图像出现。

这是它的样子

      $(document).ready(function () {
      $('a').hover(function (e) {

          var href = $(this).attr('href');
          alert(href); // shows c:/images/jj.gif for that particular record as I have the hyperlinks for a given column within a grid

          $("body").append("<p id='preview'><img src='" + this.href + "' alt='Image preview' /></p>");


      });
  });

Answer 1

$(document).ready(function () {
      $('a').hover(function (e) {

          var href = $(this).attr('href');
          alert(href); // shows c:/images/jj.gif for that particular record as I have the hyperlinks for a given column within a grid

          $("body").append("<p id='preview'><img src='" + href + "' alt='Image preview' /></p>");


      });
  });

如果您已将href分配给变量，则不需要将其引用为this.href

Answer 2

这是更新的小提琴：http://jsfiddle.net/w5jLd/1/

$(document).ready(function() {
    $('a').hover(function(e) {

        var href = $(e.target).attr('href');
        $(e.target).next('div').append("<p id='preview'><img src='" + href + "' alt='Image preview' /></p>");

    },function(){   // i have added this when mouse out of the link 
                    // preview will be destroyed.

        $('#preview').remove();

    });
});

您正在徘徊链接但未捕获目标本身。所以e.target选择悬停项目。

带有图像的jquery超链接

2 个答案: