jquery - 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();
        });