极客观点
项目管理
HarmonyOS
场景是鼠标移动到用户名字，会显示该用户的个人信息的层，在这个层上可以对用户进行关注。
现在碰到问题是从用户名字移开，进入个人信息层的时候，信息会消失。因为我写了一个移除代码。我感觉我写错了，但是我又不知道怎么写。
$(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($iDiv);
}
else if (event.type == "mouseout") {
$(this).find('.popover_box').remove();
//popover_box是构建的层，移除链接后，直接移掉该层
}
})后续问题补充：
补充动态生成的popover_box显示层是这样的
<a name="user" data-uid="10003" >张三
<div class="popover_member">
<div class="member_face">xxx</div>
<div class="member_name">xxxx</div>
</div>
</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 $iDiv = $("<div class=\"popover_box\"><div class=\"popover_member\"><div class=\"popover_member_face\"><img src=\"xxx\"/></div><div class=\"popover_member_name\">李强</div>" +
"<div class=\"popover_member_company\">公司名称</div></div><div class=\"popover_member_stat\">文章1 话题2 </div></div>");
var $iDiv = $(obj.content);
$iDiv.css("top", top + "px");
$iDiv.css("left", left + "px");
$(this).append($iDiv);
$(".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);
}
})
1)不监听对a[name=user]链接的mouseout事件，而是监听 $('.popover_box')元素的mouseout事件，适合
.popover_box元素显示在链接上方
2)还是监听a[name=user]链接的mouseout事件，但是设置一个延迟操作,同时监听.popover_box元素的mouseover事件，适合元素和链接有段距离，需要鼠标移动的情况。代码如下: