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

Edited:

This is the table and 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 >
      <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 >
          <th scope="row">Primary</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
        <tr >
          <th scope="row">Primary</th>
          <td>Column content</td>
          <td>Column content</td>
          <td>Column content</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

The row that doesn't have a class gets the background color but the row with "table-primary" remains the same. I tried a few combinations and none of them worked.

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

How can I get this to work?

Stack Blitz

CodePudding user response：

It is actually doing the hover - just not using the color you tried to apply due to the .table-hover and specificity due to https://getbootstrap.com/docs/5.1/content/tables/#how-do-the-variants-and-accented-tables-work

To use your own hover on all rows you can remove the table-hover class and force it on the 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 >
  <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 >
      <th scope="row">Primary</th>
      <td>Column content</td>
      <td>Column content</td>
      <td>Column content</td>
    </tr>
    <tr >
      <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.