如何让Div坚持光标

Question

我有一个脚本,在悬停时显示div并将其粘贴到光标上.

$(".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
    });
});

它可以工作,但不知何故,粘性div和光标之间总是有很大的空间.

这是我的Div的CSS:

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

我的JS有问题吗？我感谢任何帮助!

在这里你可以看到它的问题:http://www.cyrill-kuhlmann.de/index.php/projects

---

这是我从JS获得JS的示例小提琴:http://jsfiddle.net/hj57k/

Answer 1

这是一个很好的纯 javascript和简单的方法来使 div 粘在光标指针上。我们也可以删除 css，并以相同的方式使用 javascript 完成所有样式：

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

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>