Bootstrap over table: 禁用特定行的悬停效果

Question

找到但它不包含我的答案，因为它建议在特定行上设置固定背景，这可能会破坏样式，例如在设置 bg-gradient 的情况下parent.

tr.exclude:hover > td {background-color: rgba(0,0,0,0);} 或 tr.exclude:hover {background-color: rgba(0,0,0,0);} 看起来只是在悬停背景颜色上添加另一种背景颜色，而不是替换它，因为新颜色会出现，以防 alpha 不是 0 而是悬停如果 alpha 为 0.

，效果仍然存在

Bootstrap 的 Table 文档说“.table-hover 在 <tbody>[ 中的 table 行上启用悬停状态=34=]".

但事实上，即使 <tbody> 之外的 <tr> 也会应用悬停状态。

是否有一种工作方式可以禁用 Bootstrap 悬停 table 特定行的悬停效果？

Answer 1

非常简单，将一个 class 分配给除您不希望效果发生的特定行之外的所有行。
在 table:hover 语句中使用 select child class.

HTML:-

<table id="tbl">
  <tr class="enabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr class="enabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr class="disabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
  <tr class="enabled-Hover">
    <td>abc</td>
    <td>abc</td>
    <td>abc</td>
  </tr>
</table>

CSS:-

#tbl *, #tbl{
  border:1px solid #000;
}

#tbl:hover .enabled-Hover{
  background-color:#f55;
}

Answer 2

只需将您的 {background-color: rgba(0,0,0,0);} 替换为 {box-shadow: none;}。

Bootstrap over table: 禁用特定行的悬停效果

Bootstrap hover table: disable hover efect on specific row

css

hover

bootstrap-5