Question

在创建日历时，我偶然发现了一个问题，即如何使单元具有自举4悬停效果。

How the calendar looks so far

我希望单元格具有类似于Hoverable rows的悬停效果，而无需更改Bootstraps CSS。

有什么提示吗？当我在这里时：有什么方法可以使桌子完全对称（方形单元格）

编辑：

table td:hover { background-color: rgba(0,0,0,.075); }

是not realy working。单元格应该是较深的蓝色，而不是灰色。

Answer 1

您可以这样做

table td:hover {
    background-color: rgba(0,0,0,.075);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<table class="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
  </tr>
</thead>
<tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
  </tr>
  <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
  </tr>
  <tr>
      <th scope="row">3</th>
      <td colspan="2">Larry the Bird</td>
      <td>@twitter</td>
  </tr>
</tbody>
</table>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

引导程序表单单元悬停

1 个答案: