如何更改引導程式中具有特定類的表格行的懸停背景顏色？-有解無憂

編輯：

這是表格和 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/[email protected]/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>

沒有類的行獲得背景顏色，但具有“table-primary”的行保持不變。我嘗試了幾種組合，但都沒有奏效。

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

我怎樣才能讓它作業？

堆疊閃電戰

uj5u.com熱心網友回復：

它實際上是在懸停 - 只是由于https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-.table-hover的特殊性而不使用您嘗試應用的顏色重音表作業

要在所有行上使用您自己的懸停，您可以洗掉table-hover該類并將其強制在td.

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

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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.

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/449280.html

標籤：css 引导程序 5

上一篇：按字母顯示徽標

下一篇：將Javascript與CSS網格一起使用