2

我有一个使用 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/

4

2 回答 2

2

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

于 2012-04-12T19:21:50.347 回答
0

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; 
}
于 2012-04-12T22:12:41.223 回答