html - 如何防止表行突出显示在悬停时消失

Question

在我被要求移除突出显示的悬停效果之前，我一切正常。我设法使悬停效果透明，但问题是当我将鼠标悬停在选定的行上时，它当然会变成白色。我需要它来保持我分配给所选行的自定义颜色。

<table class=" table table-bordred table-striped table-hover">
                    <tr><th>No</th><th>Name</th></tr>
                    <tr ng-repeat="job in jobArray" class="pointer" ng-class="{highlight: job.JobNumber===selectedJob.JobNumber}">
                        <td ng-dblclick="editJobModal(job)" ng-click="selectJob(job)">{{job.JobNumber}}</td>
                        <td ng-dblclick="editJobModal(job)" ng-click="selectJob(job)">{{job.JobName}}</td>
                    </tr>
                </table>

  .table-striped tbody tr.highlight td { 
  background-color: #428bca;
  color:white;
 }
.table-hover tbody tr:hover td {
  background-color: #428bca;
  color: black

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

Answer 1

您可以使用 .not() 选择器指定悬停不应影响具有 .highlight 类的行:

.table-hover tbody tr:not(.highlight):hover td {
  background-color: #428bca;
  color: black
}

.table tbody tr:not(.highlight):hover td,
.table tbody tr:not(.highlight):hover th {
    background-color: transparent;
}