javascript - 将鼠标悬停在图像上

我有一个带有白色文字“天使”的图像。每当我将鼠标悬停在上面时，都需要用红色替换它。

<img src="img/angel_word.gif" class="word" id="angelWord">


        <script>
      $("#angelWord").hover(function(){
            $("#angelWord").replaceWith('<img src="img/angel_word_red.gif" class="word" id="angelWord">');
      },

      function(){
      $("#angelWord").replaceWith('<img src="img/angel_word.gif" class="word" id="angelWord">');
      });
        </script>`

我不知道为什么，但是不起作用。图像变成红色，但是当我将鼠标移开时，它保持红色。我也尝试过将鼠标悬停在鼠标上，但是它也没有给我任何结果：

$("#angelWord").mouseover(function(){
    $("#angelWord").replaceWith('<img src="img/angel_word_red.gif" class="word" id="angelWord">');
});

$("#angelWord").mouseout(function(){
    $("#angelWord").replaceWith('<img src="img/angel_word.gif" class="word" id="angelWord">');
});

最佳答案

尝试这个：

$('#angelWord').hover(function() {
     $(this).attr("src", "img/angel_word_red.gif");
}, function() {
     $(this).attr("src", "img/angel_word.gif");
});

干杯!