호버에서 행을 강조 표시하지 않고 중요하지 않음.

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- 내가 중요한 것을 제거하면 작동하지 않습니다.

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

두 개의 다른 선택기를 사용하여 배경색을 변경하려고합니다. table tr:nth-child(even) td은 tr:hover td보다 우선합니다. tr와 bw의 bg 색상을 번갈아 설정하면 td의 bg 색상을 설정할 수 있습니다.

은 또한 당신은 호버 선택의 우선 순위

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

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

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

Answer 2

:nth-child 선택은 값이 값을 지정의 기준이보다 큰 지정 마치를 높이기 위해 다음과 같은 선택을 할 수 있습니다.

즉, table tr:nth-child(odd) td의 지정 값이 table tr td보다 큽니다. 따라서 호버하면 tr td은 무시됩니다. table tr:nth-child(odd) td에는 배경색이 #ffffff이므로

!important 구문을 사용하면 값의 최대 값을 지정합니다. 그래서 그것은 작동합니다.