Question

我试图使用jQuery将鼠标悬停在图像上，同时更改另一个图像。我完成了那部分，我不明白的部分是当我将鼠标悬停在图像上然后将鼠标移开时，如何让原始图像返回？任何帮助将不胜感激。

这是我到目前为止所做的：

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

Answer 1

.hover() accepts two callbacks，一个用于hoverIn，另一个用于hoverOut。

所以你可以做类似

的事情

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

Answer 2

我不喜欢更改img源代码，因为您可能会出现滞后或断开连接问题，然后您的替代图片可能会显示。这也可以在没有jQuery的情况下完成。

＆＃13;

.img-swap{
 width: 100px;
 height: 100px;
}

.img-swap .img-swap-alt{
  display: none;
}

.img-swap:hover .img-swap-alt{
  display: block;
}

.img-swap:hover .img-swap-def{
  display: none;
}

＆＃13;

<div class="img-swap">
<img class="img-swap-def" src="http://lorempixel.com/output/abstract-q-c-300-300-10.jpg"/>
<img class="img-swap-alt" src="http://lorempixel.com/output/food-q-c-300-300-1.jpg" />
</div

＆＃13;

Answer 3

你必须使用它：

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

希望这有帮助。

Answer 4

我建议您使用.prop()代替.attr()，因为它最终会被弃用。

如果您想要更改图片，则需要使用.mouseenter()和mouseleave()

$(document).ready(function() {

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

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

我认为这样可以让代码更容易理解，因为您已经明确编写了这两个事件的编码，但这只是我的意见，.hover()也很有效。

Answer 5

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

https://api.jquery.com/hover/

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

在悬停状态下更改后将图像更改回原始图像？

5 个答案: