有没有办法创建一个元素，当一个不同的元素悬停在 cursor 之后时出现？

Question

目标

正如标题所说，我试图拥有两个元素，元素 A 和元素 B。我想让元素 B 仅在元素 A 悬停时显示，但我也希望元素 B 跟随 cursor而不会抖动。

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

代码

编辑：

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

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

问题

有没有其他方法可以做我想要完成的两件事之一？ CSS 是否有其他方法可以隐藏/显示不在同一个 div 中的元素？ 或者 javascript 的某种方式？ 如果可能的话，我宁愿不使用 jQuery 。 我尝试为 mouseover 和 mouseout 添加事件侦听器，但它们触发不正确，如果我只是 console.log 任何事件，鼠标悬停会使它触发 mouseover 和 mouseout 多次，这会导致它闪烁。 有什么方法可以让content的边缘距离 window 的左侧/顶部多远（以像素为单位）？ 如果是这样，我可以从 pageX/pageY 中减去它，这可能会起作用。

顺便说一句，如果我正在做的事情似乎没有必要，或者我给出的描述不是您尝试查看 html/whatever 时发生的情况，请告诉我，尽管这可能是因为原始代码足够长，我不会在这里发布，所以我尝试制作一个显示相同内容的示例。

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

编辑

我想我也可以包含我在项目中使用的实际代码，以防我在示例代码中出错，或者忘记包含我没有意识到相关的内容。 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>

有没有办法创建一个元素，当一个不同的元素悬停在 cursor 之后时出现？

问题描述

目标

代码

编辑：

解释

问题

编辑

编辑 2

1 个解决方案

解决方案1
2 已采纳 2021-06-06 00:15:57

有没有办法创建一个元素，当一个不同的元素悬停在 cursor 之后时出现？

问题描述

目标

代码

编辑：

解释

问题

编辑

编辑 2

1 个解决方案

解决方案1 2 已采纳 2021-06-06 00:15:57

解决方案1
2 已采纳 2021-06-06 00:15:57