jquery - jQuery mous イベントの問題

Question

私のウェブサイトには、下の画像のようなリンクのリストがあり、それぞれに同じクラス名があります。

ユーザーがこれらのリンクのいずれかにカーソルを合わせると、テキストの右側に画像が表示されます。このようなもの：

また、ユーザーがコンテンツの外に出たとき。マウスアウト機能で画像が消えます。これまでのところ、すべてが完全に正常に機能しています。ただし、それらはすべて同じクラスを持っているためです。これらのテキスト リンクのいずれかにいる限り、画像は消えません。次のような結果になります。

これは、マウスをあるコンテンツから別のコンテンツにすばやくホバーすると発生します。そして、あなたがこれらのリンク コンテナのいずれかにいる限り、それは消えません。単一の画像のみを表示し、他の画像が同時に表示されないようにするにはどうすればよいですか?

これを処理するために使用するコードを次に示します。

$('.my_link a').bind('mouseover', function(){
        var my_title = $(this).html();
        var title_width = parseInt($(this).width());
        var next = $(this).next();
        $.post('ajax/get_ajax_function.php',{my_title : my_title }, function(data){
            $(next).html(data).css('left', title_width+10+'px');
                    //The $(next).html() has a name class of '.my_info_wrap' which I remove once the user hover out the link, and put it back it when they hover inside the content.

        });
    }).mouseout(function(){
        $('.my_info_wrap').remove();
    });

Answer 1

新しいイメージを追加する前に、既存のイメージを削除するのはどうですか:

    $('.my_link a').bind('mouseover', function(){
            var my_title = $(this).html();
            var title_width = parseInt($(this).width());
            var next = $(this).next();
            $.post('ajax/get_ajax_function.php',{my_title : my_title }, function(data){
                $('.my_info_wrap').remove(); // <---------- HERE                
                $(next).html(data).css('left', title_width+10+'px');
                        //The $(next).html() has a name class of '.my_info_wrap' which I remove once the user hover out the link, and put it back it when they hover inside the content.

            });
        }).mouseout(function(){
            $('.my_info_wrap').remove();
        });