-3

ホバー時に画像を変更する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');
});
4

2 に答える 2

0

次のように、いくつかのアクションを機能に分割する必要があります。

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()は画像を 3 番目の画像に変更し、3 番目の画像をクリックすると再びリセットされる新しいクリック機能をバインドします。

于 2013-10-16T06:55:28.963 に答える
0

コードに従って、div をクリックすると、画像 src が myimage_03 に cgange されます。再度ホバーをバインドすると、ホバー時に同じ画像が表示されます。 * $("#mydiv_01 img").attr('src','images/myimage_03'); *

すべての div イメージを myimage_03 に変更します。

于 2013-10-16T11:09:23.700 に答える