如何让Div坚持光标

我有一个脚本，在hover时显示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和简单的方法来使光标指针。 我们也可以删除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 { transition: transform 0.23s; } 

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; } 

  
mouse 

Answer 3

试试这个（根据小提琴）：

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

Answer 4

只是另一个“粘扣”解决方案。

 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); } }