Question

我正在构建一个包含4列的bootstrap响应表。

我想要实现的是，应该隐藏最后一列中的默认可见性状态，但是当我悬停相应的行时，该行中的最后一列应该将内容可见性更改为可见。这可能不使用javascript吗？

Html：

<table class="table table-hover table-striped">
  <thead>
    <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
        <td>Row 1</td>
        <td>column 1</td>
        <td>column 2</td>
        <td>column 3 hide</td>
    </tr>
    <tr>
        <td>Row 2</td>
        <td>column 1</td>
        <td>column 2</td>
        <td>column 3 hide</td>
    </tr>
    <tr>
        <td>Row 3</td>
        <td>column 1</td>
        <td>column 2</td>
        <td>column 3 hide</td>
    </tr>
  </tbody>
</table>

和一些CSS实验，这是我能走多远：（我可以确定最后一栏，但我不知道如何改变可见状态）

.table-hover tbody tr td:last-child {
    color: #4d4d4d;
    text-decoration:none;
    visibility: hidden;
}

希望有人可以帮助我。欢呼声，

Answer 1

试试这个：

.table-hover tbody tr:hover td:last-child {
      visibility: visible;
}

Working Example

引导表，当悬停一行时，我可以更改最后一列中的内容可见性

1 个答案: