Question

这是我的html文件中的表格。我正在尝试悬停效果，但没有！重要的是它没有工作。

<tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">
    <td colspan="1">{{case.Name}}</td>
    <td colspan="1">{{case.Total}}</td>
    <td colspan="1">{{case.Passed}}</td>
    <td colspan="1">{{case.Failed}}</td>
</tr>

css-如果我删除了！important。它不会工作。

table {
  width:100%;
  table-layout: fixed;
}

table tr:nth-child(even) td {
  background: #f3f7fb;
}

table tr:nth-child(odd) td {
  background: #ffffff;
}

tr:hover td {
  background: #eee !important;
}

Answer 1

您正尝试使用两个不同的选择器更改td的背景颜色。 table tr:nth-child(even) td优先于tr:hover td。设置tr的交替bg颜色，在悬停时可以设置td的bg颜色。

或者，您可以使用以下选择器来增加悬停选择器的优先级

tr:nth-child(n):hover td {
  background: #eee;
}

＆＃13;

table {
    width:100%;
  table-layout: fixed;

}

table tr:nth-child(even){
  background: #f3f7fb;
}

table tr:nth-child(odd) {
  background: #ffffff;
}

    tr:hover td {
      background: #eee;
    }

＆＃13;

<table><tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">

                            <td colspan="1">{{case.Name}}</td>
                            <td colspan="1">{{case.Total}}</td>
                            <td colspan="1">{{case.Passed}}</td>
                            <td colspan="1">{{case.Failed}}</td>


                        </tr>
  <tr ng-repeat="case in lastten" ng-click="setSelected(case.BuildName)" ng-class="{selected: case.Name === idSelectedVote}">

                            <td colspan="1">{{case.Name}}</td>
                            <td colspan="1">{{case.Total}}</td>
                            <td colspan="1">{{case.Passed}}</td>
                            <td colspan="1">{{case.Failed}}</td>


                        </tr>
  </table>

＆＃13;

Answer 2

看起来:nth-child选择器指定值大于base的指定值。

换句话说，table tr:nth-child(odd) td的指定值大于table tr td。因此，在悬停时，tr td将被忽略。因为table tr:nth-child(odd) td具有背景颜色#ffffff。

如果使用!important语法，则会指定值最大值。所以它有效。

突出显示悬停时不行的行！重要

2 个答案: