jQuery与图像超链接

我有以下代码，当我将鼠标悬停在超链接上时，我喜欢显示它的图像。问题是没有图像出现。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>"); 


     }); 
    });

来源

2012-11-26 Nate Pet

这是更新小提琴：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选择悬停项目。

来源

2012-11-26 18:44:53 Jai

谢谢。正如我有一个网格，这张图片显示在网格的底部。如何在每行的每个超链接旁显示它？ –

@WebDev你的意思是（网格）一些div或td。需要更多的建议。如果这是你在链接旁边有div的情况，那么你必须使用.next（）附加到该div，我正在更新我的答案。 – Jai

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

来源

2012-11-26 18:25:06 Mike

仍然无法正常工作。帮助 –

jQuery与图像超链接

回答

相关问题