悬停时更改标签 - 用文本替换图像

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");
 });