html - 我应该如何根据行悬停切换操作链接

Question

我有一个使用 HTML/jQuery 从数据库中显示的元素表。在表的最后一列中，我有一些操作链接(删除、编辑等...)。我只希望这些链接在鼠标悬停在行上时可见，所以我这样设置表格:

<table class="data" ...>
    <tr>
        <td>...</td>
        <td>...</td>
        <td>...</td>
        <td class="actions>...</td>
    </tr>
</table>

我的 CSS 看起来像:

table.data td.actions { visibility: hidden; }
table.data tr:hover td.actions { visibility: visible; }

只要我首先将鼠标悬停在该行中的任何其他列上，这就很好用。如果我将鼠标移到操作列应该在的位置上，它永远不会显示。我猜是因为该列是隐藏的，所以它不会触发该行的悬停事件。我该如何解决这个问题？

示例:http://jsfiddle.net/wB5KC/

Answer 1

我最初删除了这个问题，但我想我会把它放回去以防其他人发现它有用。解决方案是将链接移动到单元格内的 div 内，并切换 div 本身的可见性，而不是单元格。一旦单元格始终可见，它就会触发该行的悬停事件，即使没有可见内容也是如此。一旦触发悬停事件，就会显示内容。