我有一个使用table-hover的简单表
Fiddle

<table class="table table-hover">
  <thead>
    <tr>
      <th scope="col">Fleet</th>
      <th scope="col">Location</th>
      <th scope="col">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">R132</th>
      <td>High St</td>
      <td>ON TIME</td>
    </tr>
    <tr>
      <th scope="row">R100</th>
      <td>St Martins</td>
      <td>LATE</td>
    </tr>
    <tr>
      <th scope="row">W101</th>
      <td>Cafe St</td>
      <td>EARLY</td>
    </tr>
  </tbody>
</table>

我已经找到了更改默认悬停颜色的方法，并且我可以使用通常的条件格式更改表格行或单元格背景，但这不是我要找的。
例如，

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

我尝试根据“状态”列中的值格式化悬停颜色，红色表示“晚”，绿色表示“早”等，以便我可以保持相同的外观和感觉的表。