html - 带有悬停内容的可滚动表格

Question

我现在在 Codepen 中写下的任务有问题.

.content {
  display: none;
  position: absolute;
}
td:hover .content {
  display: block;
  position: absolute;
  width: 250px;
  z-index: 1;
  background-color: #ffcce0;
  color: black;
  border: 4px solid #ffb3d1;
  border-radius: 10px;
}

当我将鼠标悬停在图标上时，内容会显示它应该如何显示，但是当我向下滚动或向侧面滚动并再次悬停在同一图标上时，内容的位置会远离原始位置。在 Mozilla 中它工作正常!我该如何解决这个问题？这似乎是 Chrome 的错误，对吗？ (如果可能，解决方案应该没有 Javascript)

因此，如果我向下滚动或/和滚动到一侧，然后将鼠标悬停在绿色图标上，则内容不会显示在图标下方。我可以通过给 td 的相对位置来解决这个问题，但是当图标位于表格的底部或右侧时，内容不会显示。它有点躲在 table 后面

Answer 1

您可以通过将 position: relative; 添加到您的 td 元素来将弹出窗口放置在您想要的位置。这使得弹出窗口相对于 td 的位置。

然而，这会对位于表格底部或右侧的 td 元素造成问题；它们将隐藏在滚动的 div 中。

AFAIK 解决这个问题的唯一方法是通过 Javascript，这就是为什么例如 Bootstrap 使用 JS 来定位它们。 (Bootstrap 使用 Popper.js 库 https://popper.js.org/ )