如何更改引导程序中具有特定类的表格行的悬停背景颜色？

Question

如何更改引导程序中具有特定类的表格行的悬停背景颜色？

编辑：

这是表格和 CSS：

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

Run Code Online (Sandbox Code Playgroud)

<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>

Run Code Online (Sandbox Code Playgroud)

没有类的行获取背景颜色，但具有“table-primary”的行保持不变。我尝试了几种组合，但没有一个有效。

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

Run Code Online (Sandbox Code Playgroud)

我怎样才能让它发挥作用？

堆栈闪电战

Answer 1

Mar*_*iss 5

它实际上正在悬停 - 只是不使用您尝试应用的颜色，.table-hover 因为https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-重音表工作

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

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

Run Code Online (Sandbox Code Playgroud)

<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.

Run Code Online (Sandbox Code Playgroud)

归档时间：	4 年，5 月前
查看次数：	5576 次
最近记录：	4 年，5 月前