Javascript jQuery mouseleave e.toElement | | e.relatedTarget赢得'；行不通

我正在尝试在Facebook上制作一张用户悬停卡。但我对以下代码有一个问题：

$('body').on('mouseleave', '.avatar', function(e) {
    var to = e.toElement || e.relatedTarget;
      if (!$(to).is(".card")) {
        setTimeout(function() {
          $('.card').remove();
        }, 1000);
      }
  });

jQuery代码的工作方式必须是：如果不是

to=e.toElement | | e.relatedTarget

，则删除

.card

div。但是如果鼠标删除黑色div（

.card

），它应该留在那里，而不是

remove（）

有人能帮我吗

$（文档）.ready（函数（）{
$（“body”）.on（“mouseenter”，“.avatar”，function（）{
var offset=$（this.offset（）；
var posY=offset.top-$（窗口）.scrollTop（）+$（此）.height（）；
var posX=offset.left-$（窗口）.scrollLeft（）；
可用变量=$（窗口）.width（）-posX；
如果（$（窗口）.width（）>800）{
$（“正文”）。附加（“”）；
}
});
$（'body'）.on（'mouseleave'，'.avatar'，函数（e）{
var to=e.toElement | | e.relatedTarget；
如果（！$（to）.is（“.card”））{
setTimeout（函数（）{
$（'.card'）.remove（）；
}, 1000);
}
});
$（'body'）.on（'mouseleave'，'.card'，function（）{
$（'.card'）.remove（）；
});
});
.container{
位置：相对位置；
宽度：100%；
最大宽度：660像素；
保证金：0px自动；
溢出：隐藏；
边缘顶部：100px；
}
.邮政{
位置：相对位置；
宽度：100%；
显示：内联块；
边缘底部：30px；
}
.阿凡达{
宽度：40px；
高度：40px；
职位：房地产；
边界半径：50%；
溢出：隐藏；
}
.avatar img{
宽度：160%；
}
.卡片{
宽度：300px；
填充：100px 0px；
背景色：#000000；
边框：1px实心#d8dbdf；
}
使用鼠标的这一部分。鼠标离开时，请将卡片关闭。
.post

$('body').on('mouseleave', '.post', function() {
    $('.card').remove();
});

$(".post").append('<div class="card" style="position: fixed; top: ' + posY + 'px; left:' + posX + 'px"></div>');

并在鼠标中更改这一行，使
.card
成为
.post

$('body').on('mouseleave', '.post', function() {
    $('.card').remove();
});

$(".post").append('<div class="card" style="position: fixed; top: ' + posY + 'px; left:' + posX + 'px"></div>');

$（.post”）.append（“”）；

希望这有帮助。
使用鼠标的这一部分，鼠标离开时关闭卡片。
.post

$('body').on('mouseleave', '.post', function() {
    $('.card').remove();
});

$(".post").append('<div class="card" style="position: fixed; top: ' + posY + 'px; left:' + posX + 'px"></div>');

并在鼠标中更改这一行，使
.card
成为
.post

$('body').on('mouseleave', '.post', function() {
    $('.card').remove();
});

$(".post").append('<div class="card" style="position: fixed; top: ' + posY + 'px; left:' + posX + 'px"></div>');

$（.post”）.append（“”）；

希望这有帮助。
更改此选项：

JS
添加一个封面div，使其从头像“Y坐标”填充

在鼠标离开时，只需卸下封面卡容器

$('body').on('mouseleave', '.cover_card', function() {
    $(this).remove();
});

CSS
修改css边距以调整posY更改

.card {
 width:300px;
  padding:100px 0px;
  background-color:#000000;
  border:1px solid #d8dbdf;
  margin-top:60px;
}

更改此选项：

JS
添加一个封面div，使其从头像“Y坐标”填充

在鼠标离开时，只需卸下封面卡容器

$('body').on('mouseleave', '.cover_card', function() {
    $(this).remove();
});

CSS
修改css边距以调整posY更改

.card {
 width:300px;
  padding:100px 0px;
  background-color:#000000;
  border:1px solid #d8dbdf;
  margin-top:60px;
}

$（此）
不适合您？@Jai no this
var to=e.toElement | e.relatedTarget不工作。
var to=$（此）试试这个。@Jai Same not fixed
$（这个）
对你不起作用？@Jai no this
var to=e.toElement | e.relatedTarget不工作。
var to=$（此）试试这个。@Jai同样不修复我知道这个解决方案，但是。当
mosuleleave
.avatar
和
mouseleave
时，必须移除卡。卡
我知道这个解决方案，但是。当
mosuleleave
.avatar
和
mouseleave
.Card