有没有办法创建一个元素，当另一个元素悬停在光标上并跟随光标时出现？

Question

目标

正如标题所说，我正在尝试拥有两个元素，即元素 A 和元素 B。我希望元素 B 仅在元素 A 悬停时显示，但我还希望元素 B 跟随光标没有抖动。

我可以让 hovering/showing 部分独立工作，我可以让以下光标部分独立工作，但我似乎无法在不使用 [=64 的情况下将它们组合在一起=]，这会导致它抖动。

代码

编辑：

由于某些原因，代码片段无法正常运行，只需将代码复制到文件中即可。

HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="content">
      <div id="A"></div>
      <div id="B"></div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

CSS:

* {
 margin: 10px;
}

#content {
  position: absolute; /* Not needed in this example, but required for what I'm trying to make, I'm adding it because it might be relevant. */
  border: 5px solid green;
}

#A {
  border: 5px solid red;
  width: 500px;
  height: 500px;
}

#B {
  display: none;
  position: absolute;
  border: 5px solid blue;
  width: 100px;
  height: 100px;
}

#A:hover~#B {
  display: block;
}

和 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都在contentdiv中。如果我将其中一个移出，悬停的东西就会停止工作。然而，如果你尝试运行这个，你会看到 B 闪烁了一堆（你可能需要从 CSS 中删除 display: none），并且 'teleports' 到顶部左角。据我所知（来自 Google），这是因为我使用的是 offsetX/offsetY 而不是 pageX 和 pageY。我可以将它更改为那个，但由于它是相对于页面的，我试图将它设置为相对于 parent 元素（在本例中为 content），它不在正确的位置并且缩放时会发生变化，这是一个大问题。但是，这里真正的问题是 A 和 B 需要具有相同的 parent 元素 (content) 才能使 hover/show CSS 起作用，而 B 需要在 body 之外使用 pageX 和 pageY。

问题

是否有其他方法可以完成我要完成的两件事之一？ CSS 到 hide/show 元素不在同一个 div 中还有其他方法吗？或者 javascript 的某种方式？如果可能，我宁愿不使用 jQuery。我已经尝试为 mouseover 和 mouseout 添加一个事件侦听器，但它们触发不正确，如果我只是 console.log 任何事件，鼠标悬停会使它多次触发 mouseover 和 mouseout，这会导致它闪烁。有什么方法可以得到 content 的边缘与 window 的 left/top 的像素距离吗？如果是这样，我可以从 pageX/pageY 中减去它，这可能会起作用。

顺便说一下，如果我正在做的事情似乎没有必要，或者我给出的描述不是您尝试查看 html/whatever 时发生的情况，请告诉我，虽然可能是因为原始代码足够长，但我不会在此处 post，所以我尝试制作一个示例来说明相同的事情。

我不太确定在这种情况下除了询问之外还能做什么，但像往常一样，可能有一些我没有想到的简单答案。我试图让这个问题比过去更清晰，所以希望它能显示出来。提前感谢您的帮助！

编辑

我想我还不如包括我在我的项目中使用的实际代码，以防我在示例代码中出错，或者忘记包括我没有意识到的相关内容。 https://codepen.io/fun840/pen/QWprQXy

编辑 2

正如@DavidsaysreinstateMonica 在评论中指出的那样，我没有在我的实际代码（在 codepen 上）中指定元素 A 和 B 是什么。元素 A 为 mainitem，元素 B 为 tooltip-border.

Answer 1

您可以将 pointer-events: none; 添加到 #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);

* {
 margin: 10px;
}

#content {
  position: absolute; /* Not needed in this example, but required for what I'm trying to make, I'm adding it because it might be relevant. */
  border: 5px solid green;
}

#A {
  border: 5px solid red;
  width: 500px;
  height: 500px;
}

#B {
  display: none;
  position: absolute;
  border: 5px solid blue;
  width: 100px;
  height: 100px;
  pointer-events:none;
}

#A:hover~#B {
  display: block;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div id="content">
      <div id="A"></div>
      <div id="B"></div>
    </div>
  </body>
  <script src="script.js"></script>
</html>

有没有办法创建一个元素，当另一个元素悬停在光标上并跟随光标时出现？

Is there a way to create an element that appears when a different element is hovered on AND follows the cursor?

html

javascript

css

show

hover

目标

代码

编辑：

说明

问题

编辑

编辑 2