javascript - 鼠标移到链接，显示一个信息层，鼠标移出链接进入信息层消失！-PHP中文网问答

场景是鼠标移动到用户名字，会显示该用户的个人信息的层，在这个层上可以对用户进行关注。

现在碰到问题是从用户名字移开，进入个人信息层的时候，信息会消失。因为我写了一个移除代码。我感觉我写错了，但是我又不知道怎么写。

        $(document).on("mouseover mouseout", "a[name='user']", function (event) {
            if (event.type == "mouseover") {

             //todo ajax获取用户信息

              result = $.ajax({
                    type: "post",
                    data: {op: "getUserContent", id: uid},
                    url: "../lib/ajax_model.php",
                    async: false
                });
                var data = result.responseText;
              
         //todo ....
         //todo 构建popover_box，用定位显示在当前的链接附近
                $(this).append($ip);

            }
            else if (event.type == "mouseout") {
             $(this).find('.popover_box').remove();
         //popover_box是构建的层，移除链接后，直接移掉该层
             }
          

        })

后续问题补充：

补充动态生成的popover_box显示层是这样的

<a name="user" data-uid="10003" >张三
<p class="popover_member">
<p class="member_face">xxx</p>
<p class="member_name">xxxx</p>
</p>
</a>

现在是实际是：
然后从popover_member移入到子元素如member_face，出现了层关闭的问题，加了setTimeout()，能解决问题。

从张三移出后，移到popover_member ，使用了setTimeout();没有作用。按输出的html结构来看 popover_member的层应该<a　name="user">的子元素吧？？

补充新：
鼠标移到头像或者名字，会显示这个层，但是鼠标移入到红色区域，这个用户信息层会消失，但是这个层和红色之间的这块白色区域鼠标是不会消失的，这块区域我是对popover_member用了padding

问题补充新

        $(document).on("mouseover mouseout", "a[name='user']", function (event) {


            var remove_popoverbox_fun = function () {
                $('.popover_box').remove();

            
            };

            if (event.type == "mouseover") {
              
                if ($(this).find('.popover_box').html() == undefined) {
                    xy = $(this).offset();

                  
                    var top = xy.top + 15;
                    var left = xy.left + 20;
                    var width = 300;
                    var height = 130;


                    uid = $(this).data("id");
                  
                  /*
                    htmlobj = $.ajax({
                        type: "post",
                        data: {op: "getUserContent", id: uid},
                        url: "../lib/ajax_data.php",
                        async: false
                    });
                    var data = htmlobj.responseText;
                   

                    var obj = eval("(" + data + ")");//转换后的JSON对象
                    */


                    $(this).css("poisitin", "relative");
                    var $ip = $("<p class=\"popover_box\"><p  class=\"popover_member\"><p class=\"popover_member_face\"><img src=\"xxx\"/></p><p class=\"popover_member_name\">李强</p>" +
                     "<p class=\"popover_member_company\">公司名称</p></p><p class=\"popover_member_stat\">文章1 话题2 </p></p>");
                    var $ip = $(obj.content);
                    $ip.css("top", top + "px");
                    $ip.css("left", left + "px");
                    $(this).append($ip);

                    $(".popover_box").on("mouseenter",function(){
                        clearTimeout(remove_popoverbox_Timer);
                      


                    });
                    $(".popover_box").on("mouseleave",function(){
                            remove_popoverbox_fun();
                    });
                    
                }


            }
            else if (event.type == "mouseout") {
                alert("leave");
                clearTimeout(remove_popoverbox_Timer);
                remove_popoverbox_Timer=setTimeout(function(){
                    remove_popoverbox_fun();
                },100);
                
            }


        })

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src="script/jquery-2.1.3.min.js"></script> <script> $(function(){ var remove_popoverbox_Timer; $(document).on("mouseover mouseout", "a[name='user']", function (event) { var remove_popoverbox_fun=function(){ $('.popover_member_outer').remove(); //popover_box是构建的层，移除链接后，直接移掉该层 }; if (event.type == "mouseover") { //todo ajax获取用户信息 var data = '' + '<p class="popover_member_outer" style="padding:10px;border:1px solid red;width: 150px;height:150px;">'+ ' <p class="popover_member" style="padding:10px;border:1px solid red;width: 100px;height:100px;">'+ ' <p class="member_face">xxx</p>'+ ' <p class="member_name">xxxx</p>'+ ' </p>'+ '</p>'; var $ip=$(data); //todo .... //todo 构建popover_box，用定位显示在当前的链接附近 //$(this).append($ip); var offsetPosition=$(this).offset(); $('body').append($ip); $ip.css({ position:'absolute', left:offsetPosition.left+30+'px', top:offsetPosition.top+'px' }); $('.popover_member_outer').on("mouseenter",function(){ clearTimeout(remove_popoverbox_Timer); }); $('.popover_member_outer').on("mouseleave",function(){ remove_popoverbox_fun(); }); } else if (event.type == "mouseout") { clearTimeout(remove_popoverbox_Timer); remove_popoverbox_Timer=setTimeout(function(){ remove_popoverbox_fun(); },100); } }) }); </script> </head> <body> <a name="user" data-uid="10003" >张三</a> </body> </html>