如何更改 bootstrap 中具有特定 class 的 table 行的悬停背景颜色？

Question

已编辑：

这是table和CSS:

.table-hover tbody tr:hover {
  background-color: #fff !important;
}

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <table class="table table-hover">
      <thead>
        <tr>
          <th scope="col">Type</th>
          <th scope="col">Column heading</th>
          <th scope="col">Column heading</th>
          <th scope="col">Column heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Default</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="table-primary">
          <th scope="row">Primary</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr class="table-dark">
          <th scope="row">Primary</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

没有 class 的行获得背景颜色，但带有“table-primary”的行保持不变。我尝试了一些组合，其中 none 有效。

.table {
  &.table-primary:hover,
  &.table-primary tr:hover {
    background-color: #fff !important;
  }
}

我怎样才能让它工作？

Stack Blitz

Answer 1

它实际上是在悬停 - 只是由于 .table-hover 和 https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-accented-tables-work

的特殊性而没有使用您尝试应用的颜色

要在所有行上使用您自己的悬停，您可以删除 table-hover class 并将其强制放在 td.

table.table>tbody>tr:hover td,
table.table>tbody>tr:hover th {
  background-color: #ff4444 !important;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />

<table class="table">
  <thead>
    <tr>
      <th scope="col">Type</th>
      <th scope="col">Column heading</th>
      <th scope="col">Column heading</th>
      <th scope="col">Column heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Default</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-primary">
      <th scope="row">Primary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr class="table-dark">
      <th scope="row">Primary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
  </tbody>
</table>
<div>
  Fix for When either .table-striped, .table-hover or .table-active classes are added, the --bs-table-accent-bg is set to a semitransparent color to colorize the background. For each table variant, we generate a --bs-table-accent-bg color with the highest
  contrast depending on that color. For example, the accent color for .table-primary is darker while .table-dark has a lighter accent color.

Answer 2

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <style>
        .table td:hover,
        .table th:hover {
            background-color: #313233 !important;
        }
    </style>
</head>

<body>
    <table class="table">
        <thead>
            <tr>
                <th scope="col">Type</th>
                <th scope="col">Column heading</th>
                <th scope="col">Column heading</th>
                <th scope="col">Column heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Default</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr class="table-primary">
                <th scope="row">Primary</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
            <tr class="table-dark">
                <th scope="row">Primary</th>
                <td>Column content</td>
                <td>Column content</td>
                <td>Column content</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

注意：为了您的参考，我为每个单元格制作了悬停效果，您可以将其更改为整行的 tbody。

希望你能得到答案..

谢谢...

如何更改 bootstrap 中具有特定 class 的 table 行的悬停背景颜色？

How to change the hover background color of a table row that has a specific class in bootstrap?

css

bootstrap-5