javascript - 悬停时跟随指针的 Div

Question

我想在您悬停某些 div 时显示一个跟随指针的 float div，到目前为止，我发现这段带有 jquery 的代码在悬停整个 body 时有效，但我想要的是在某些 div 上工作:

CSS

<div id="tail">mouse tail</div>

查询

$(document).bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

我尝试将 bind 绑定(bind)到特定的选择器，但没有成功。

当您将鼠标悬停在 div 之外时，该 div 应该消失，当您将鼠标悬停在该 div 中时，该 div 应该会重新出现。

Answer 1

只需将鼠标离开时显示为无，进入时显示为 block 即可

$('.something').bind('mousemove', function(e){
    $('#tail').css({
       left:  e.pageX + 20,
       top:   e.pageY
    });
});

$('.something').bind('mouseleave', function(e){
    $('#tail').css({
       display:  'none'
    });
});
$('.something').bind('mouseenter', function(e){
    $('#tail').css({
       display:  'block'
    });
});

#tail {
  position: fixed;
  display: none;
}

.something {
  width: 200px;
  height: 160px;
  background: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tail">mouse tail</div>

<div class='something'> stuff </div>