3

jquery hover にこの構文オプションを使用しています。

これが私のコードです：

$('mySelector')
    .hover(
        function(){
            $(this).html('<img src="images/myImage2.png" height="23" width="24" />');
        },
        function(){
            $(this).html('<img src="images/myImage1.png" height="23" width="24" />');
        }
    );

mySelector によって参照される要素の元のテキストは、mouseleave オプションです -$(this).html('<img src="images/myImage1.png" height="23" width="24" />');

mouseenter/mouseover の最初のハンドラーは正しく機能しています。ただし、mouseleave/mouseout (元のイメージを復元する必要があります) の 2 番目のハンドラーは実行されません。firebug でトレースすると、mouseover イベントがトリガーされますが、2 番目の「function()」には到達しません。

編集：

わかりやすくするために、私の html コードは次のようになります。

<div id="results">
   <span class="imageClass"><img src="images/myImage1.png" height="23" width="24" /</span>
</div>

そして、私のセレクターは"#results .imageClass"

4

3 に答える 3

3

この問題の原因は、イベントをトリガーmouseenterした要素(<img>ノード) が、mouseleaveイベントをトリガーする前に DOM から削除されたことが考えられます。mySelectorイベントはのイベント ハンドラによって捕捉および処理され<img>ますが、実際のイベント ソースは です。したがって、マウスが最初に入力したことがないため、mouseleaveイベントが new によってトリガーされないことは理にかなっています。<img>

明確にするために: イベント ハンドラーがバインドされている DOM ノード ( mySelector) は、最初にイベントをトリガーするノード ( ) と同じではありません<img>。<img>にはこのイベントに対する独自のハンドラがないため、イベントは DOM ツリーをバブルアップして、ノード (この場合はmySelector) に遭遇するまで発生します。

彼/彼女の答えが不正確だったという事実にもかかわらず、adeneoの解決策はうまくいくことがわかりました. 実際の例を次に示します: jsbin.com/ikolog。

役立つリソース:

于 2012-07-10T11:16:41.540 に答える
1

要素全体を置き換えていますが、新しい要素にはイベントハンドラーがバインドされておらず、最初にバインドした要素と同じではないため、ホバー関数では機能しません。次のことを試してください。

$('mySelector').hover(function(){
        $('img', this).prop('src', 'images/myImage2.png');
    },
    function(){
        $('img', this).prop('src', 'images/myImage1.png');
    }
);

または、それがオプションでない場合は、を使用してイベントを委任しますon()

于 2012-07-10T10:15:48.410 に答える
-1

私は彼の答えで述べているPPvGに同意しました：

この問題の原因は、mouseenter イベントをトリガーした要素 (ノード) が DOM から削除されていることです。イベントは DOM を mySelector にバブルアップし、そこでキャッチして処理しますが、これがイベントのソースです。したがって、mouseleave イベントが new によってトリガーされないことは理にかなっています (マウスが最初に入力したことはありません)。

したがって、解決策として、 を使用できます.attr('src','full_url_here')。adeneo は、回答で次のコードを提案しています。

$('#myImg').hover(function()
    {
        $(this).attr("src","http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css-grey.png");
    },
    function(){
        $(this).attr("src","http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css.png");
    }
);

このための追加の HTML コード:

<div id="mySelector">
    <img id="myImg" src="http://cdn1.iconfinder.com/data/icons/dellios_system_icons/png_128/css.png" />
</div>

最後に、デモ: http://jsbin.com/elofoc/7/edit#preview

于 2012-07-10T10:23:09.250 に答える