javascript - 垂直对齐 div 内容，在鼠标悬停时替换 tr 元素(使用 jQuery)

Question

我正在处理一个 html 表格，我在其中使用 jQuery 显示有关行的更多信息。

下面是我如何做的一个例子: http://jsfiddle.net/rMXAp/7/

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。
• “position:absolute；顶部:50%；”对于 div。

我不能将 div 的“display”属性设置为 none 以外的任何值，否则它会显示在表格下方(参见 jsfiddle)。

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

我觉得我在这里完全错过了一些东西......

Answer 1

啊..垂直对齐... 我认为最好的方法是使用 table-cell 显示。

问题是要使 display:table-cell; 正常工作，父级必须有 display:table;

所以我建议这样:

HTML

<div id="divOverlay">
   <div class="content" style="display:table-cell;vertical-align:middle;">
   </div> <!-- the content div will hold the content -->
</div> 

Javascript:

// 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')); 

看看这个 jFiddle: http://jsfiddle.net/SpacePineapple/4T42H/