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

我试图在鼠标指针处显示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

请用小提琴演示一个示例。这可能是由于

正文

上的

填充

或

边距

，或

#show1

元素造成的。我认为

左填充

和

顶部填充

会有所帮助，而不仅仅是

左填充

和

顶部

…试试看