带图像的jquery超链接

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

这是它的样子

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


      });
  });

$（文档）.ready（函数（）{
$（'a'）。悬停（函数（e）{
var href=$（this.attr（'href'）；
alert（href）；//显示特定记录的c:/images/jj.gif，因为我在网格中有给定列的超链接
$（“正文”）。追加（
）；
});
});

$（文档）.就绪（函数（）{
$（'a'）。悬停（函数（e）{
var href=$（this.attr（'href'）；
alert（href）；//显示特定记录的c:/images/jj.gif，因为我在网格中有给定列的超链接
$（“正文”）。追加（
）；
});
});

---

如果已将href分配给变量，则无需将其引用为此。href

这是更新的fiddle：

$（文档）.ready（函数（）{
$（'a'）。悬停（函数（e）{
var href=$（e.target.attr（'href'）；
$（e.target）.next（'div'）.append（
）；
}，function（）{//我在鼠标离开链接时添加了此选项
//预览将被销毁。
$（“#预览”）.remove（）；
});
});

---

您悬停在链接上，但未捕获目标本身。因此

e.target

选择悬停项。

谢谢。由于我有一个网格，这张图片显示了网格底部的路径。如何在每行的每个超链接旁边显示它？@WebDev您是指（网格）一些div或td。需要更多的建议。如果在这种情况下，链接旁边有一个div，那么必须用.next（）追加到该div，我正在更新我的答案。

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


      });
  });

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

    });
});