在悬停/鼠标悬停时，文本不会随页内滚动条移动

Question

我在悬停内容上使用了一些内容，以便为缩写标题提供额外数据：

On hover normally

但是，当我使用滚动条时，文本会在页面上移动：

When I use the scrollbar

这是一个包含HTML，CSS，Javascript的常规表：

<th style="text-align:center;">
<div>
NYITKG3
</div>
<div class="popup" >
Joyride Green Tea RTD Keg
</div>
</th>

$(".cell").mouseover(function() {
$(this).children(".popup").show();
}).mouseout(function() {
$(this).children(".popup").hide();
});

.popup {
    display:none;
    position:absolute;
    border:1px solid #000;
    width:100px;
    color: black;
    background: white;
    }

Answer 1

见这里：

<强> jsfiddle

你需要为一个元素设置relative位置，以便absolute弹出窗口保持相对于该元素，为什么在使用css时使用JQ？

.cell { 
  position:relative;
 }
 .cell:hover .popup { 
 display:block
 }

Answer 2

事实证明答案很简单。如果您希望绝对定位的元素在使用页内滚动条时保持在其父元素内，则只需将position:relative;添加到父div的css中：

<th style="text-align:center;position:relative;">
<div>
NYITKG3
</div>
<div class="popup" >
Joyride Green Tea RTD Keg
</div>
</th>

现在悬停文本将随表格一起滚动。