Javascript 使用JQuery定位div

我有一个div，在悬停span元素时，我想相对于鼠标定位它。 这个代码在这里，它似乎不起作用。div仅在显示

varx；
变量y；
$（文档）.mousemove（函数（事件）{
x=event.pageX；
y=event.pageY；
});
$（'#sp'）。悬停（函数（）{
document.getElementById（'sp_info'）。style.display=''；
document.getElementById（'sp_info'）.style.position='absolute'；
document.getElementById（'sp_info'）.style.left=x；
document.getElementById（'sp_info'）.style.top=y；
});

应随鼠标位置移动的文本

这是一个悬停测试
请参见代码中的内联注释：

// On mousemove on #sp element
$('#sp').mousemove(function(e) {

    // Get the current mouse positions
    var x = e.pageX,
        y = e.pageY;

    // Update the position of `#sp_info` dynamically
    $('#sp_info').css({
        'position': 'absolute',
        'top': y + 5, // Leave some margin
        'left': x + 5, // Leave some margin
        'display': 'block'
    });
}).mouseleave(function() {
    $('#sp_info').hide();
});


使用jQuery的
css函数
。了解更多信息。

varx；
变量y；
$（文档）.mousemove（函数（事件）{
x=event.pageX；
y=event.pageY；
document.getElementById（'sp_info'）。style.display=''；
document.getElementById（'sp_info'）.style.position='absolute'；
document.getElementById（'sp_info'）.style.left=x+'px'；
document.getElementById（'sp_info'）.style.top=y+'px'；
});
$（'#sp'）。悬停（函数（）{
});

应随鼠标位置移动的文本

这是一个悬停测试
您应该在悬停事件中设置
左侧
和
顶部


$（'#sp'）。悬停（函数（事件）{
$（'sp_info'）.show（）.css({
位置：'绝对'，
左：event.pageX，
顶部：event.pageY，
});
}，函数（）{
$（'sp_info'）.hide（）；
});

应随鼠标位置移动的文本

这是一个悬停测试
混合使用javascript和jquery有什么原因吗？我真的不知道如果不是这样会怎么样。它是$（'sp_info'）.style.position（“绝对”）？在末尾追加
px
，就像这样
x+'px'
，这不是使用此方法移动的。工作正常，将其设置为答案。
var x;
var y;
$(document).mousemove(function(event) {
  x = event.pageX;
  y = event.pageY;

  $('#sp').hover(function() {
    $("#sp_info").css({position:"absolute", left:x, top:y});
  });

});