How to let a Div stick to cursor

Question

I have a script that shows a div on hover and sticks it to the cursor.

$(".picture_holder_thumb").mouseover(function () {
    $(".title", this).show();
});

$(".picture_holder_thumb").mouseout(function () {
    $(".title", this).hide();
});
$(document).bind('mousemove', function (e) {
    $(".title", this).css({
        left: e.pageX,
        top: e.pageY
    });
});

It works, but somehow there's always very much space between the sticky div and the cursor.

This is my Div's CSS:

#img-container .captioning .title {
    width: auto;
    height:auto;
    position: absolute;
    float:left;
    z-index:1;
    display: none;
}

Is there something wrong with my JS? I am thankful for any help!

Here you can see it live with the problem: http://www.cyrill-kuhlmann.de/index.php/projects

---

This it the example fiddle i got the JS from: http://jsfiddle.net/hj57k/

Answer 1

Here is a nice pure javascript and easy way to make a div stick to the cursor pointer.

document.addEventListener('mousemove', function(ev){
    document.getElementById('acab').style.transform = 'translateY('+(ev.clientY-80)+'px)';
    document.getElementById('acab').style.transform += 'translateX('+(ev.clientX-100)+'px)';            
},false);

#acab {
  position: fixed; /* Floating above */
  transition: transform 0.23s; /* Sticking effect */
  pointer-events: none; /* Allow clicking trough the div */
}
button {cursor: pointer}

<div id="acab">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b1/Anarchist_black_cat.svg/150px-Anarchist_black_cat.svg.png">  </img>
</div>

<!-- A button, to test a mouse click -->
<button onclick="document.body.style.background=['red','green','grey','purple','magenta'][~~(Math.random()*5)]">Test click!</button>

Answer 2

Just another "sticky button" solution.

var xp=0, yp = 0, rx, ry, loop,
    mouseX = 0,
    mouseY = 0,
    t = $('#follower');

$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

t.mousemove(function(){
    var parentOffset = $(this).offset(); 
    rx = (mouseX - (parentOffset.left))*2;
    ry = (mouseY - (parentOffset.top))*2;
    //console.log(rx+'.'+ry); 
});

t.mouseenter(function(){
   clearInterval(loop);
   loop = setInterval(function(){
        xp += ((rx-50) - xp) / 4-1;
        yp += ((ry-50) - yp) / 4-1;
        t.css({left:xp, top:yp});
    }, 30); 
    
});

t.mouseout(function(e){
     clearInterval(loop);
     loop = setInterval(function(){
         xp += (0 - xp) / 3-1;
         yp += (0 - yp) / 3-1;
         t.css({left:xp, top:yp});
    }, 30);
   
});

#home{
    position: absolute;
    width:50px;
    height:50px;
    top:100px;
    left:100px;
}
#follower{
    position: absolute;
    width:50px;
    height:50px;
    background:#777;
    z-index:5;
    cursor:pointer;
    color: #fff;
    background: #00b6f4;
    border-radius: 6px;
    border-bottom: 2px solid #009dd3;
}
#follower:hover{
-webkit-animation-name: shake-little; 
  -webkit-animation-duration: 100ms;
  -webkit-animation-iteration-count: infinite; 
  -webkit-animation-timing-function: ease-in-out; 
  -webkit-animation-delay: 0s; 
  -webkit-animation-play-state: running;
}

@-webkit-keyframes shake-little { 0% { -webkit-transform: translate(0px, 0px) rotate(0deg); }
  2% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  4% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  6% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  8% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  10% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  12% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  14% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  16% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  18% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  20% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  22% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  24% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  26% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  28% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  30% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  32% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  34% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  36% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  38% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  40% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  42% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  44% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  46% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  48% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  50% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  52% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  54% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  56% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  58% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  60% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  62% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  64% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  66% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  68% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  70% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  72% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  74% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  76% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  78% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  80% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  82% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  84% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  86% { -webkit-transform: translate(0px, 0px) rotate(-0.5deg); }
  88% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  90% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  92% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); }
  94% { -webkit-transform: translate(0px, -1px) rotate(-0.5deg); }
  96% { -webkit-transform: translate(-1px, 0px) rotate(-0.5deg); }
  98% { -webkit-transform: translate(-1px, -1px) rotate(-0.5deg); } 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="home"><div id="follower"></div></div>

Answer 3

var mouseX = 0,
    mouseY = 0;

$(document).mousemove(function(e){
   mouseX = e.pageX;
   mouseY = e.pageY; 
});

var follower = $("#follower");
var xp = 40, yp = 40;
var loop = setInterval(function(){
    // change 12 to alter damping higher is slower
    xp += (mouseX - xp) / 12 -1;
    yp += (mouseY - yp) / 12 -1;
    follower.css({left:xp, top:yp});

}, 30); 

#follower{
    position: absolute;
    padding:10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="follower">mouse</div>

Answer 4

Try this (according to the fiddle):

$(document).bind('mousemove', function(e){
    var width = $('#tail').width()/2;
    $('#tail').css({
       left:  e.pageX-width,
       top:   e.pageY
    });
});