父节点向左滚动时悬停弹出窗口不移动

【问题标题】：Hover Popup does not move when parent node scroll left父节点向左滚动时悬停弹出窗口不移动
【发布时间】：2020-04-30 11:14:01
【问题描述】：

那里。我试图制作一个悬停弹出窗口。当我的鼠标悬停在表格标题上时，会弹出详细说明。但是，当我向左滚动表格时，弹出窗口仍然存在。有什么办法可以让它与标题保持一致？

Jsfiddle 链接： https://jsfiddle.net/fmchen/hmaczn87/10/

一些截图：

向左滚动时：

我知道我可以将.CellComment1 中的position: absolute; 更改为position: relative; 但是，它看起来像这样：

【问题讨论】：

创建一个小提琴并添加你的代码，以便更容易理解你的问题。
嗨@DeepshikaS，我已经编辑了我的问题并制作了一个虚拟HTML。如果您向左滚动并将鼠标悬停在标题上，您将看到问题。

标签： javascript jquery html css

【解决方案1】：

我添加了位置：relative;到 field_29 类，然后是 position: absolute;到跨度，它工作正常。如果您想在 1 行中，则添加跨度宽度： max-content;并为中心对齐添加一个margin-left：50％；和变换： translateX(-50%);

.field_29:hover span.CellComment{   display: block;   position: absolute;   width: max-content;   margin-left: 50%;   transform: translateX(-50%); }

.field_29 {   position: relative; }

【讨论】：

嗨@Ronald，谢谢你的帮助。这正是我想要的。但是，我的 CSS 中缺少一个重要的部分。这是th { overflow: hidden; 我想这会导致问题。你有什么想法吗？
我在这里做了一个新的 JsFiddle：jsfiddle.net/fmchen/hmaczn87/15
天啊，我明白了！只需将溢出设置为可见。
嗨@Chen-CN，我认为这不是一个好主意，因为 apan 不在，所以它不可见。你剩下的问题到底是什么？对不起，我的英语顺便说一句。
哦，我明白了，我认为它现在可以正常工作了：D