如何让Div坚持光标 [英] How to let a Div stick to cursor

问题描述

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

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

它有效，但不知何故粘性 div 之间总是有很大的空间和光标。

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

这是我的Div的CSS：

This is my Div's CSS:

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

我的JS有问题吗？我很感谢你的帮助！

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

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

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

这是我从JS获得JS的例子： http://jsfiddle.net/hj57k /

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

推荐答案

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

Here is a nice pure javascript and easy way to make a div stick to the cursor pointer. We can as well remove the css, and do all the styling with javascript on the same way:

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

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

这篇关于如何让Div坚持光标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！