如何防止表格行高亮在懸停時消失

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;
}

Answer 2

我沒有在您的CSS中看到任何會使背景變成白色的東西，但這可能是罪魁禍首。 它所要做的就是在高亮顯示行時刪除單元格的背景色。 您可以嘗試從CSS中刪除以下內容：

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