Javascript 有没有一种方法可以创建一个元素，当其他元素悬停在光标上并跟随光标时，该元素会出现？ 目标

正如标题所说，我尝试使用两个元素，元素A和元素B。我希望元素B仅在元素A悬停时显示，但我也希望元素B跟随光标而不抖动。

我可以让悬停/显示部分自己工作，也可以让下面的光标部分自己工作，但是如果不使用offsetX/offsetY，我似乎无法将它们放在一起，这会导致它抖动

代码 编辑： 由于某些原因，代码段无法正常工作，只需将代码复制到文件中即可

HTML：

CSS：

*{
利润率：10px；
}
#内容{
position:absolute；/*在本例中不需要，但对于我试图制作的东西来说是必需的，我添加它是因为它可能是相关的*/
边框：5px纯绿色；
}
#A{
边框：5px纯红；
宽度：500px；
高度：500px；
}
#B{
显示：无；
位置：绝对位置；
边框：5px纯蓝色；
宽度：100px；
高度：100px；
}
#A:悬停#B{
显示：块；
}

还有JavaScript：

let b=document.getElementById（'b'）；
const onMouseMove=（e）=>{
b、 style.left=e.offsetX+'px'；
b、 style.top=e.offsetY+'px'；
}
document.addEventListener（'mousemove'，onMouseMove）；

解释 正如您所看到的，A和B都在

content

div中。如果我将其中一个移出，则悬停功能将停止工作。但是，如果您尝试运行此命令，您将看到B闪烁一束（您可能需要从CSS中删除

display:none

），并“传送”到左上角。据我所知（从谷歌），这是因为我使用offsetX/offsetY而不是pageX和pageY。我可以将其更改为该值，但由于它是相对于页面的，并且我试图将其设置为相对于父元素（

content

，在本例中），因此它不在正确的位置，在缩放时会发生更改，这是一个大问题。然而，这里真正的问题是，A和B需要有相同的父元素（

内容

）才能使悬停/显示CSS工作，B需要在

正文

之外才能使用pageX和pageY

问题: 我想完成的两件事中有没有其他方法？使用CSS是否有其他方法隐藏/显示不在同一div中的元素？还是用javascript？如果可能的话，我宁愿不使用jQuery。我尝试为mouseover和mouseout添加一个事件侦听器，但它们的触发不正确，如果我只是console.log任何事件，mousing over会使它多次触发mouseover和mouseout，这会导致它闪烁。是否有某种方法可以获取

内容

的边缘与窗口左/顶部的距离（以像素为单位）？如果是这样的话，我可以从pageX/pageY中减去它，这可能会奏效

顺便说一句，如果我正在做的事情似乎没有必要，或者我给出的描述不是你尝试查看html/任何东西时发生的情况，请让我知道，尽管可能是因为原始代码足够长，我不会将其发布在这里，所以我尝试制作一个示例来说明同样的事情

我真的不知道在这种情况下除了问之外该怎么办，但像往常一样，可能有一些我没有想到的简单答案。我试图让这个问题比过去更清晰，所以希望它能显示出来。提前谢谢你的帮助

编辑 我想我最好包括我在项目中使用的实际代码，以防我在示例代码中出错，或者忘记包括一些我没有意识到的相关内容

编辑2

---

正如@davidsaysresinstatemonica在评论中指出的那样，我没有在我的实际代码（在codepen上）中指定元素A和B。元素A是

main项

，元素B是

工具提示边框

，您可以只添加

指针事件：无到
#B
css。它将修复它，因为B将不再拦截鼠标事件


let b=document.getElementById（'b'）；
const onMouseMove=（e）=>{
b、 style.left=e.offsetX+'px'；
b、 style.top=e.offsetY+'px'；
}
document.addEventListener（'mousemove'，onMouseMove）
*{
利润率：10px；
}
#内容{
position:absolute；/*在本例中不需要，但对于我试图制作的东西来说是必需的，我添加它是因为它可能是相关的*/
边框：5px纯绿色；
}
#A{
边框：5px纯红；
宽度：500px；
高度：500px；
}
#B{
显示：无；
位置：绝对位置；
边框：5px纯蓝色；
宽度：100px；
高度：100px；
指针事件：无；
}
#A:悬停#B{
显示：块；
}
您只需添加
指针事件：无到
#B
css。它将修复它，因为B将不再拦截鼠标事件


let b=document.getElementById（'b'）；
const onMouseMove=（e）=>{
b、 style.left=e.offsetX+'px'；
b、 style.top=e.offsetY+'px'；
}
document.addEventListener（'mousemove'，onMouseMove）
*{
利润率：10px；
}
#内容{
position:absolute；/*在本例中不需要，但对于我试图制作的东西来说是必需的，我添加它是因为它可能是相关的*/
边框：5px纯绿色；
}
#A{
边框：5px纯红；
宽度：500px；
高度：500px；
}
#B{
显示：无；
位置：绝对位置；
边框：5px纯蓝色；
宽度：100px；
高度：100px；
指针事件：无；
}
#A:悬停#B{
显示：块；
}

@davidsaysrestatemonica我也不知道它为什么会工作，但正如我在问题中所说，pageY和pageX不会闪烁。唯一的问题是，如果你放大/缩小或调整窗口的大小，它的位置相对于你的鼠标会改变（所以如果你把它移动到r