将鼠标悬停在图像上 [英] ReplaceWith image on hover

问题描述

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

I have an image with white text "angel". I need it to be replaced with red one whenever I keep mouse over it.

<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>`

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

I am not sure why but it doesnt work. The image becomes red, but when I get my mouse out of it, it stays red. I have also tried with mouseover, but it gives me no results as well:

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

干杯！

这篇关于将鼠标悬停在图像上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！