jQuery鼠标事件问题

Question

在我的网站上，我有类似下图的链接列表，每个链接都有相同的类名：

用户将鼠标悬停在其中任何一个链接上后，会在文本的右侧弹出一些图像。像这样：

当用户将鼠标悬停在内容之外时。使用mouseout功能，图像将消失。到目前为止，一切都工作得很好。但是，因为它们都具有相同的类别。只要您处于任何这些文本链接中，图像就不会消失。这会产生这样的结果：

如果您将鼠标从一个内容快速悬停到另一个内容，就会发生这种情况。只要你在任何这些链接容器中，它就不会消失。如何才能显示单个图像并防止其他图像同时出现？

这是我用来处理这个问题的代码。

$('.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();
        });