懸停時更換標籤 - 用文字替換圖像

Question

我有一個圖像的值，我希望能夠懸停在圖像上並將其更改爲文本（以顯示圖像的含義，因爲圖像相當小）

我試過使用replaceWith，但是當你停止盤旋時不起作用。

$(document).ready(function(){ 
     $("#apples").hover(function(){ 
      $(this).replaceWith("<span id=\"apples\">apples: 10</span>"); 
      }, function(){ 
      $(this).replaceWith("<span id=\"apples\"><img src=\"images/apples.png\" alt=\"apples\"/> 10</span>"); 
     }); 
    }); 

希望我解釋正確。我只是想用蘋果的文字轉換出蘋果的形象，當用戶將鼠標懸停在上面時。

Answer 1

您需要更換元件的內HTML，否則原始的元素（其具有懸停事件偵聽器）停止存在：

$("#apples").hover(function(){ 
     $(this).html("apples: 10"); 
     }, function(){ 
     $(this).html("<img src=\"images/apples.png\" alt=\"apples\"/> 10"); 
});