如何修改CSS或JS禁用Bootstrap日期选择器表头前两行hover效果？

I see the issue you're facing: when using the Tempus Dominus Bootstrap 4 datepicker inside a table-dark table-hover table, the header rows (month/date selection) of the datepicker turn white on hover, making the text unreadable. This happens because the table's CSS styles are taking precedence over the datepicker's default styles.

Root Cause #

The .table-dark .table-hover tr:hover th rule from Bootstrap's dark table styles overrides your custom datepicker hover styles, since it has higher specificity than your original .datepicker thead tr th:hover selector.

Solution: Targeted CSS Override #

The cleanest fix is to use a more specific CSS selector to enforce the correct hover styles for the datepicker's header and date cells. Here's how to adjust your code:

1. Update your CSS section to replace the old datepicker hover rules with these targeted ones:

/* Fix datepicker header hover style - override table-dark's white text */
.table-dark .bootstrap-datetimepicker-widget .thead-blue tr th:hover {
  color: #000;
  background-color: transparent;
}

/* Ensure date cells maintain your custom style on hover */
.bootstrap-datetimepicker-widget table tr td:hover {
  color: #000;
  background-color: SkyBlue;
  background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
}

2. Full Working Code (with all fixes applied):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
  <script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/js/tempusdominus-bootstrap-4.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.0.1/css/tempusdominus-bootstrap-4.min.css" rel="stylesheet"/>
</head>
<style>
  .input-group {
    max-width: 200px;
  }
  .label_column {
    width: 30%;
  }
  .table > tbody > tr > td {
    vertical-align: middle;
  }
  .status {
    color: LawnGreen;
    font-size: 15px;
  }
  .bootstrap-datetimepicker-widget.dropdown-menu {
    width: 300px;
    height: 300px;
  }
  .bootstrap-datetimepicker-widget table tr td {
    border-radius: 0%;
    border:dotted 1px black;
    background-color: SkyBlue;
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
    color: black;
  }
  /* Fix datepicker header hover conflict */
  .table-dark .bootstrap-datetimepicker-widget .thead-blue tr th:hover {
    color: #000;
    background-color: transparent;
  }
  /* Preserve date cell hover style */
  .bootstrap-datetimepicker-widget table tr td:hover {
    color: #000;
    background-color: SkyBlue;
    background-image: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0));
  }
</style>
<body>
  <table class="table table-sm table-hover table-borderless table-dark">
    <tbody>
      <tr>
        <td>
          <div class="form-group">
            <div class="input-group date" id="date_time_picker_csd" data-target-input="nearest">
              <input type="text" class="form-control datetimepicker-input" data-target="#date_time_picker_csd" name="signing_date" required/>
              <div class="input-group-append" data-target="#date_time_picker_csd" data-toggle="datetimepicker">
                <div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
              </div>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
  <script type="text/javascript">
    $(function () {
      $('.input-group').datetimepicker({
        format: 'YYYY-MM-DD',
      });
    });
  </script>
</body>
</html>

Why This Works #

• The selector .table-dark .bootstrap-datetimepicker-widget .thead-blue tr th:hover has higher specificity than Bootstrap's default table hover rule, so it takes precedence without needing !important.
• We explicitly set the text color to black and remove the hover background for the datepicker header, ensuring it stays readable.
• The date cell hover rule preserves your custom background gradient and text color, so your design stays intact.

内容的提问来源于stack exchange，提问作者Zaraki Kenpachi