html - 悬停时纯 css3 表格行覆盖

Question

我正在尝试制作一个具有以下结构的简单表格:

<table>
    <tr>
        <td>Number</td>
        <td>Name</td>
        <td>E-mail</td>
        <td>Role</td>
    </tr>
    <tr>
        <td>1</td>
        <td>James</td>
        <td>Hetfield</td>
        <td>Owner</td>
    </tr>
    <tr class="hidden">
        <td><!-- checkbox --></td>
        <td colspan="2"> <!-- link to details --></td>
        <td><!-- buttons: edit, remove --></td>
    </tr>
</table>

因此，在包含数据的行之后有包含控件的隐藏行，它应该在鼠标悬停时“替换”确切的行，并在鼠标在外面时消失。尝试使用 position: relative on row 和 absolute on hidden + display:none/block on hover 来做到这一点，但失败了。 :(

Answer 1

您能否在每个 tr 中添加“ Action 单元格”并在悬停时简单地显示/隐藏它们？

HTML:

<table>
    <tr>
        <td>Number</td>
        <td>Name</td>
        <td>E-mail</td>
        <td>Role</td>
    </tr>
    <tr>
        <td class="info-td">1</td>
        <td class="info-td">James</td>
        <td class="info-td">Hetfield</td>
        <td class="info-td">Owner</td>
        <td class="action-td">checkbox</td>
        <td class="action-td" colspan="2">details --></td>
        <td class="action-td">buttons</td>
    </tr>
</table>

CSS:

.action-td {
    display: none;
}
tr:hover > .info-td {
    display: none;
}
tr:hover > .action-td {
    display: table-cell;
}

fiddle :http://jsfiddle.net/V9Qk7/