javascript - jQuery mouseleave e.toElement || e.relatedTarget 不起作用

Question

我正在尝试像在 Facebook 上一样制作用户悬停卡片。但我对以下代码有疑问:

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

jQuery 代码必须像这样工作:if not to = e.toElement || e.relatedTarget 然后 删除.card div。但是如果你用鼠标离开黑色 div (.card)，它应该留在那儿，而不是 remove()。

有人可以帮我吗？

DEMO

$(document).ready(function() {
  $("body").on("mouseenter", ".avatar", function() {
    var offset = $(this).offset();
    var posY = offset.top - $(window).scrollTop() + $(this).height();
    var posX = offset.left - $(window).scrollLeft();
    var available = $(window).width() - posX;
    if ($(window).width() > 800) {
        
          $("body").append('<div class="card" style="position: fixed; top: ' + posY + 'px; left:' + posX + 'px"></div>');
       
    }
  });
  $('body').on('mouseleave', '.avatar', function(e) {
    var to = e.toElement || e.relatedTarget;
      if (!$(to).is(".card")) {
        setTimeout(function() {
          $('.card').remove();
        }, 1000);
      }
  });
  $('body').on('mouseleave', '.card', function() {
    $('.card').remove();
  });
  
});

.container {
  position:relative;
  width:100%;
  max-width:660px;
  margin:0px auto;
  overflow:hidden;
  margin-top:100px;
}
.post {
  position:relative;
  width:100%;
  display:inline-block;
  margin-bottom:30px;
}
.avatar {
  width:40px;
  height:40px;
  position:realtive;
  border-radius:50%;
  overflow:hidden;
}
.avatar img {
  width:160%;
}

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="post">
    <div class="avatar" id="1"><img src="https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg"></div>
  </div>
  <div class="post">
    <div class="avatar" id="2"><img src="https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg"></div>
  </div>
  <div class="post">
    <div class="avatar" id="3"><img src="https://images.pexels.com/photos/56866/garden-rose-red-pink-56866.jpeg"></div>
  </div>
</div>

Answer 1

改变这个:

JS

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

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

修改 posY 以从头像“Y 坐标”重新定位封面。

posY = posY-50;

在鼠标离开时，只需取下封面卡片容器即可。

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

https://codepen.io/anon/pen/ejrZMJ