Javascript 在鼠标悬停时更改图像后，是否将其更改回原始图像？

我试图使用jQuery在图像更改另一个图像时将其悬停在图像上。我已经完成了那部分，我不明白的是，当我把鼠标悬停在图像上，然后把鼠标从图像上移开时，我如何才能恢复原始图像？任何帮助都将不胜感激

以下是我到目前为止的情况：

$(document).ready(function(){
     $("#04").hover(function(){
        $("#imgBig").attr("src", "imgLab10/04.jpg");
     });
});

.hover（）

，一个用于

hoverIn

，一个用于

hoverOut

所以你可以做一些像

$(document).ready(function(){
    $("#04").hover(
        function(){
            $("#imgBig").attr("src", "imgLab10/04.jpg");
        },
        function() {
             $("#imgBig").attr("src", "oldImg.jpg");
        }
    );
});

---

您必须像这样使用它：

$( "#04" ).hover(
  function() {
    //When the mouse enter
    $("#imgBig").attr("src", "imgLab10/04.jpg");
  }, function() {
    //When the mouse out
    $("#imgBig").attr("src", "imgLab10/OriginalImage.jpg");
  }
);

希望这有帮助。

JQuery.hover（）方法接受两个函数参数。一个是onMouseover事件，第二个是onMouseout事件

---

我建议您使用

.prop（）

而不是

.attr（）

，因为它最终会被弃用

如果要更改回图像，需要使用

.mouseenter（）

和

mouseleave（）

---

我认为这使代码更容易理解，因为您正在显式地为这两个事件编码，但这只是我的观点，而且

.hover（）

也可以很好地工作。

我不喜欢更改img源代码，因为您可能会遇到延迟或断开连接的问题，然后您的替代图像现在可能会显示出来。这也可以在完全不使用jQuery的情况下完成

.img交换{
宽度：100px；
高度：100px；
}
.img swap.img swap alt{
显示：无；
}
.img swap:hover.img swap alt{
显示：块；
}
.img交换：悬停.img交换定义{
显示：无；
}

您可以使用纯CSS实现这一点，甚至不需要jQuery。有一个答案可以解释这一点。这是一个很好的方法！不过，这会增加加载时间，因此，如果您有大型图像和大量实例要应用此方法，请务必小心。请尽可能同意使用纯CSS的方法，并且此方法适用于在页面加载期间下载所有资源的少量实例。尽可能利用精灵，并通过CSS进行简单操作。最高的x设备/x浏览器支持。
.hover(handlerIn, handlerOut)

handlerIn
Type: Function( Event eventObject )
A function to execute when the mouse pointer enters the element.

handlerOut
Type: Function( Event eventObject )
A function to execute when the mouse pointer leaves the element.

$(document).ready(function() {

  $("#04").mouseenter(function() {
    $("#imgBig").prop("src", "imgLab10/04.jpg");
  });

  $("#04").mouseleave(function() {
    $("#imgBig").prop("src", "orignalPath");
  });
});