如何解决DataTable表头触发hover变色问题 仅数据行hover显示圆角灰色背景

问题原因 #

你当前使用的table#tracklistTable tr:hover选择器会匹配表格内所有<tr>元素，包含<thead>里的表头行，所以hover表头时也会触发背景色变化。
你之前写的thead:hover规则不生效，是因为变色的是<thead>下的<tr>元素，而非<thead>容器本身，给<thead>设置背景样式无法覆盖子元素<tr>的背景设置。

解决方案 #

方案1（推荐）

修改hover选择器，仅匹配<tbody>内的数据行，直接从规则层面排除表头行，逻辑更简洁，不需要额外写覆盖规则：
把你原来的hover规则替换为如下代码即可：

table#tracklistTable tbody tr:hover {
    background: rgb(113, 128, 134) !important;
}

方案2（兼容原有规则）

如果你不想修改原有选择器，也可以单独给表头行添加hover覆盖规则，优先级与原有规则一致时，后定义的规则会生效：

table#tracklistTable thead tr:hover {
    background: transparent !important;
}

修改后原有数据行的圆角灰色hover效果不会受任何影响，完全符合需求。

内容的提问来源于stack exchange，提问作者Martin