如何使用jQuery将元素居中到鼠标的位置？

Question

所以我有这个盒子，当我移动鼠标时我想跟随鼠标，但希望鼠标始终位于盒子的中心。我并不是说盒子必须只是在盒子下面，但我的意思是让盒子只能垂直上下移动以与鼠标内联。

我尝试了几种方法，但无法使其工作，当我做了一点时，它没有正确居中。

这是我的JS：

$( ".wrapper" ).mousemove(function(e) {
    var box = $( '.box' ).outerHeight();

    box = box / 2;

    $( '.box' ).css( 'top', ( e.pageY - box ) + 'px' );
} );

这是一个小提琴 - ＆gt; http://jsfiddle.net/rCabj/

谢谢！

Answer 1

http://jsfiddle.net/rCabj/1/

<。> <。>

position: absolute; 

Answer 2

将CSS更改为position：absolute解决问题

Answer 3

将top更改为marginTop。

 $( '.box' ).css('marginTop', ( e.pageY - box ) + 'px' );

的 The demo. 的