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與圖像超鏈接

回答

相關問題