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

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

2 个答案: