Javascript JQuery insertAfter（）；移动下一个表格单元格

我有一个表格设置，当我将鼠标悬停在表格单元格上时，我希望在单元格旁边显示一个信息框，我使用Jquery insertAfter（）；但问题是他不应该移动下一个单元格，因为我的信息框是绝对位置

小提琴：

HTML

Javascript/Jquery

$("table tr td").mouseover(function(){
    $('#hover_info_box').show().html("<p>content</p>").insertAfter(this);
});

$("table tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

$（“表tr td”）.mouseover（函数（）{
$（“#hover_info_box”）.show（）.html（“content
”）.insertAfter（this）；
});
$（“表tr td”）.mouseout（函数（）{
$（“#悬停信息框”）.hide（）；
});

insertAfter

中断您的标记，因为

不能直接插入

标记之后

您可以改为使用

appendTo

，并修复CSS以显示单元格右侧的信息框

演示：

看看这个

即，将jQuery更改为：

$("table tr td").mouseover(function(){
    var td=$(this);
    $('#hover_info_box').show().html("<p>content</p>").css({left:td.position().left + td.outerWidth()+'px', top:td.position().top});
});

$("table tbody tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

$（“表tr td”）.mouseover（函数（）{
var td=$（本）；
$（'#hover_info_box'）.show（）.html（“content
”）.css（{left:td.position（）.left+td.outerWidth（）+'px'，top:td.position（）.top}）；
});
$（“表tbody tr td”）.mouseout（函数（）{
$（“#悬停信息框”）.hide（）；
});

通过在中断文档流后使用Inserta（导致无效HTML以及您注意到的视觉效果），只需正确设置信息框相对于当前悬停单元格的位置。

尝试：

$("table tr td").mouseover(function(){
    $('#hover_info_box').show().html("<p>content</p>").appendTo($(this).next());
});

$("table tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

$（“表tr td”）.mouseover（函数（）{
$（'#hover_info_box'）.show（）.html（“content
”）.appendTo（$（this.next（））；
});
$（“表tr td”）.mouseout（函数（）{
$（“#悬停信息框”）.hide（）；
});

---

< jQuery UI工具提示会是你可以考虑的吗？您好，谢谢您的快速回复，youre解决方案很有效，但是当我移动到下一个单元格时，我必须退出信息框才能获得新的信息框。当我将单元格悬停在表格末尾时，信息框会显示在表格单元格的左侧，是否还有其他选项？

$("table tr td").mouseover(function(){
    var td=$(this);
    $('#hover_info_box').show().html("<p>content</p>").css({left:td.position().left + td.outerWidth()+'px', top:td.position().top});
});

$("table tbody tr td").mouseout(function(){
    $('#hover_info_box').hide();
});

$("table tr td").mouseover(function(){
    $('#hover_info_box').show().html("<p>content</p>").appendTo($(this).next());
});

$("table tr td").mouseout(function(){
    $('#hover_info_box').hide();
});