如何防止表格突出顯示在飛車上

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