JS

Question

我正在尝试像在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()。

有人可以在这里帮助我吗？

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

Answer 2

使用这部分的鼠标离开，当鼠标离开.post时关闭卡片

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

然后在mouseenter中更改此行，使.card成为.post的一部分

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

希望这会有所帮助。

jQuery mouseleave e.toElement || e.relatedTarget无法正常工作

2 个答案:

JS

CSS