在悬停时使用淡入淡出效果更改图像后单击div时交换图像

Question

我有一个div，可以在悬停时更改图像。 我希望在悬停时使用淡入淡出效果更改div img，但是当单击它时我希望将图像再次更改为另一个图像。 我有以下代码，它有点工作。单击图像时，它会更改为我想要的图像，但是当它处于悬停状态时，它会变回，并且淡化效果会影响到上一个图像。有人可以帮忙吗？

HTML

<div id="mydiv_01"><img src="images/myimage_01.png" style="position:absolute;" id="my    image_01"/>
<img src="images/myimage_02.png" style="position:absolute;display:none;" id="myimage_02"   alt=""/></div>

的JavaScript

$("#mydiv_01").hover(function() {
  $("#mydiv_01 img").fadeToggle('medium');
});


$("#mydiv_01").click(function(){
$("#mydiv_01 img").attr('src','images/myimage_03');
});

Answer 1

您需要将一些操作分成功能，如下所示：

reset();

function reset() {
    $('#myimage_01').attr('src', 'images/myimage_01.png');
    $('#myimage_02').attr('src', 'images/myimage_02.png');
    $("#mydiv_01").hover(function () {
        $("#mydiv_01 img").fadeToggle('medium');
    });
    setClick();
}

function setClick() {
    $("#mydiv_01").click(function () {
        $("#mydiv_01 img").attr('src', 'images/myimage_03');
        $(this).unbind('mouseenter mouseleave');
        $(this).click(function () {
            reset();
        });
    });
}

开头的reset()基本上是将图像设置回原件并绑定悬停功能和点击功能。但点击功能setClick()会将您的图像更改为第三个，并绑定一个新的点击功能，当您单击第三个图像时，该功能会再次重置。

Answer 2

根据您的代码，一旦您点击div，图像src将获得cinige到myimage_03，如果再次绑定悬停它将在悬停时显示相同的图像。   * $（“＃mydiv_01 img”）。attr（'src'，'images / myimage_03'）; *

它会将所有div图像更改为myimage_03。