无法在所需的鼠标位置显示div

Question

我试图在鼠标指针处显示mouseenter事件的div。但相反它在一点距离显示div。

$(document).on('mouseenter', '.mediumListIconTextItem', function (e) {
    // $("#school").append($("#show1"));
    // $("#show1").css({'display' : 'block'});
    alert(e.pageX);
    alert(e.pageY);

    $('#show1').css({
        "top": (e.pageY),
        "left": (e.pageX),
        "background-color": "red",
        "z-index": "10",
        "position": "absolute"
    });

    $('#show1').show(); 
});
$(document).on('mouseleave', '.mediumListIconTextItem', function () {
    // $("#show1").css('display','none');
    $('#show1').hide();
});

是否有任何其他解决方案在鼠标输入事件和给定指针位置显示div