Question

我有一张白色文字“天使”的图片。每当我把鼠标放在它上面时，我需要用红色替换它。

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

Answer 1

尝试mouseenter和mouseleave。当光标首先悬停元素并且它分别超出元素的边界时，它会被触发。

Answer 2

试试这个：

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

干杯！

Answer 3

尝试使用缓存图片的css background，避免在每个悬停时从服务器请求图片; :hover

HTML

<img class="word" id="angelWord">

CSS

#angelWord {
  width:50px;
  height:50px;
  background:url(img/angel_word.gif);
}

#angelWord:hover {
  background:url(img/angel_word_red.gif);
}

#angelWord {
  width:50px;
  height:50px;
  background:url(http://lorempixel.com/50/50/nature);
}

#angelWord:hover {
  background:url(http://lorempixel.com/50/50/cats);
}

<img class="word" id="angelWord">

Answer 4

这不起作用，因为您将悬停处理程序绑定到现有的<img>标记，但是一旦用其他<img>标记替换它，新标记就没有了那些处理程序了。

您可以使用递归重新绑定悬停处理程序，但更简单的jQuery答案是使用.attr（）函数并仅更改src属性。

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

功能范例： http://jsfiddle.net/hiljusti/bt1ns62o/2/

如果CSS3是一个选项，你也可以使用CSS处理它。（Is it possible to set the equivalent of a src attribute of an img tag in CSS?）

至少在发布时，每个现代浏览器都不支持CSS解决方案。

在悬停时替换图像

4 个答案: