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

Question

所以我有一个盒子，当我移动鼠标时，我想跟随鼠标移动，但希望鼠标始终在盒子的中心。我的意思不是说盒子必须在盒子下面，而是在盒子下面，我的意思是让盒子只垂直上下移动以与鼠标对齐。

我尝试了几种方法，但都不能让它工作，当我做了一段时间，它不能正确地居中。

这是我的JS：

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

    box = box / 2;

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

这是一个小提琴-> http://jsfiddle.net/rCabj/

谢谢!

Answer 1

将top更改为marginTop。

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

Answer 2

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

在.box上

position: absolute; 

Answer 3

将CSS更改为position: absolute解决了问题