Javascript 如何将div附加到鼠标指针，使其在滚动期间正常工作

我试图在按钮上方附加一些提示，并在悬停时显示它们，以便它们直接出现在鼠标指针旁边。我想将这些提示的文本存储在按钮的数据属性中，并使用jquery动态创建它们。我使用.pageX.pageY的东西来查找光标的坐标，但它只能在滚动的某个点上正常工作

$（“按钮”）.mouseenter（函数（e）{
var data=$（this.data（'value'）；
如果（数据）{
$('', {
“类”：“提示”，
文本：$（this）.data（'value'），
css:{
位置：'固定'，
顶部：e.pageY-230，
左：e.pageX+15
}
}).附于（本）；
}
})
.mouseleave（函数（）{
$（'.tip'，this.remove（）；
})
.mousemove（函数（e）{
$（'.tip'，this）.css({
顶部：e.pageY-230，
左：e.pageX+15
});                 
})

按钮{
利润率：10px；
}
.分区{
宽度：100%；
高度：350px；
背景色：#ddd；
边际：0px；
}
.提示{
边框：1px实心#eee；
背景：#fff；
盒影：3px4px6pxRGBA（0,0,0,0.4）；
填充：3倍；
字体大小：粗体；
}

弗斯特
第二
第三个

水之镜
雅达
布拉布拉

您需要以这种方式使用

e.clientX

和

e.clientY

top:e.clientY+$（this）.height（）

和

left:e.clientX+$（this）.width（）/2

用于范围中

此

元素的底部中心。您可以添加当前元素悬停的任何其他内容

e.clientX

和

e.clientY

将提供精确的鼠标坐标

下面的片段

$（“按钮”）.mouseenter（函数（e）{
var data=$（this.data（'value'）；
如果（数据）{
$('', {
“类”：“提示”，
文本：$（this）.data（'value'），
css:{
位置：'固定'，
顶部：e.clientY+$（this）.height（），
左：e.clientX+$（this）.width（）/2
}
}).附于（本）；
}
})
.mouseleave（函数（）{
$（'.tip'，this.remove（）；
})
.mousemove（函数（e）{
$（'.tip'，this）.css({
顶部：e.clientY+$（this）.height（），
左：e.clientX+$（this）.width（）/2
});                 
})

按钮{
利润率：10px；
}
.分区{
宽度：100%；
高度：350px；
背景色：#ddd；
边际：0px；
}
.提示{
边框：1px实心#eee；
背景：#fff；
盒影：3px4px6pxRGBA（0,0,0,0.4）；
填充：3倍；
字体大小：粗体；
}

弗斯特
第二
第三个

水之镜
雅达
布拉布拉

你说的“但它只在滚动的某一点上工作正常”是什么意思？@ajameswolf。我的意思是，只有当按钮在屏幕上的某些特定位置时，它才会将提示放在光标附近。运行上面的代码段并滚动直到出现第一行按钮。当你停留在它们上面时，一切都很好。但如果您再次滚动并再次悬停，提示将显示在屏幕上相同的位置，但远离按钮和光标。我不是以英语为母语的人，所以是的，我有时会很默默无闻，很抱歉。希望，这是有道理的