Div following pointer on hover

Question

I want to show a floating div that follows the pointer when you're hovering certain divs, so far I found this piece of code with jquery that works when hovering the whole body, but what I want is to work on certain divs:

CSS

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

Jquery

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

I tried bind to specific selector but it didn't work.

The div should disapear when you hover outside the div and reappear when you hover in.

Answer 1

Just set the div display to none when the mouse leaves and display block when it enters

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