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本身的可见性，而不是单元格。一旦单元格始终可见，即使没有可见内容，它也会触发行的悬停事件。触发悬停事件后，将显示内容。

Answer 2

http://jsfiddle.net/wB5KC/5/

刚改为：

table.data td.actions {
    zoom: 1;
    filter: alpha(opacity=0);
    opacity: 0;
}
table.data tr:hover td.actions {
    zoom: 1;
    filter: alpha(opacity=100);
    opacity: 1; 
}

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

2 个答案: