Javascript 垂直对齐div内容，替换鼠标上方的tr元素（使用jQuery）

我正在处理一个html表，在该表中，我使用jQuery显示关于行的更多信息

下面是我如何做的一个例子：

jQuery通过将不透明度设置为0，基本上会淡出有问题的行，并添加一个包含以下div的覆盖：

<div id="divOverlay" style=""><p>This is the overlay div.</p><p id="info"></p></div> 

这是覆盖分区。

jQuery然后根据tr/row的“desc”属性设置div文本

我遇到的问题是，当鼠标悬停在表格行上时，文本的垂直对齐（以div形式）取代了表格行

我试过的东西

• 对于tr元素和div，“垂直对齐：中间；”
• “最小高度：10em；”用于div
• “位置：绝对；顶部：50%；”代表部门

我不能将div的“display”属性设置为none以外的任何值，否则它将显示在表的下面（请参阅jsfiddle）

我知道有很多关于垂直对齐的问题，但是考虑到我正在使用jQuery显示一个div，并动态设置html，它们会以相同的方式使用吗？或者如何

我有种感觉，我完全错过了这里的一些东西…

啊。。真实对齐。。。 我认为最好的方法是使用

表格单元格

显示

问题是对于

显示：表格单元格

要正常工作，父级必须具有

显示：表

所以我建议如下：

HTML

看看这把小提琴：

---

我想将“desc”数据的内容保留在一个范围内不会有任何问题

采用了

线高：正常和垂直对齐：中间
的跨度，并为div添加了
线高。

编辑你的小提琴

如果你还需要别的东西，请告诉我

编辑

如果您不想更改“desc”的内容，那么可以实现

$divOverlay.html（“+$（this.closest（'tr'）.attr（'desc'）+”）；
是否希望文本悬停在当前div的确切区域上？是的，它所覆盖的行，我的目标是使其垂直居中于该空间。有趣--有时间我会用的。
<div id="divOverlay">
   <div class="content" style="display:table-cell;vertical-align:middle;">
   </div> <!-- the content div will hold the content -->
</div> 

// inside onmouseover...
$divOverlay.css({
        position: 'absolute',
        display: 'table', //set parent's display to table
        ....
    }); 
    //set the html to the child content holder
    $divOverlay.find(".content").html($(this).closest('tr').attr('desc')); 

$divOverlay.html("<span style='vertical-align:middle;display:inline-block;line-height:normal'>"+$(this).closest('tr').attr('desc')+"</span>");