javascript - 更改悬停时具有淡入淡出效果的图像后单击 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 将 cgange 到 myimage_03，如果您再次绑定悬停，它将在悬停时显示相同的图像。 * $("#mydiv_01 img").attr('src','images/myimage_03'); *

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