时间戳

首页 > 解决方案 > jQuery mouseleave e.toElement || e.relatedTarget 不起作用

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 ，则删除.carddiv。但是，如果您将鼠标离开黑色 div ( .card)，它应该保留在那里，而不是remove().

有人能帮我一下吗 ？

演示

$(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>

标签： javascriptjqueryhtmlcss

解决方案

改变这个：

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

推荐阅读