单击和悬停时操作表格行颜色，使用 Zebra 行颜色时发生冲突

Question

我有一个包含许多行的表，使用 jQuery im 捕获单击并悬停，然后使用添加和删除类更改颜色。单击时，该行将突出显示为绿色，当您将鼠标悬停时，该行将突出显示为粉红色。

$("#div2 tr").click(function() {
$('tr').removeClass('highlight2');  
$(this).addClass('highlight2');
});
$('#div2 tr').hover(function() {
$(this).addClass('highlight1');
}, function() {
$(this).removeClass('highlight1');        
});
.highlight1 {
background-color: #FFD6F5;
}
.highlight2 {
background-color: #CEF6CE;
}

我还想做的是斑马线行，使用 2 色调灰色，但是当我使用额外的 CSS 执行此操作时，它会阻止上述内容工作，并相信冲突正在发生，因为我缺乏 CSS 我无法解决这个问题，因此需要一些帮助或尽可能指出正确的方向。

tr:nth-child(even) {background: #F2F2F2}
tr:nth-child(odd) {background: #FAFAFA}

Answer 1

一般定义tr:nth-child(even)的优先级高于像highlight1这样的类。但是，您可以通过为选定/单击行的单元格着色来欺骗技巧。请参阅以下示例：

$("#div2 tr").click(function() {
$('tr').removeClass('highlight2');  
$(this).addClass('highlight2');
});
$('#div2 tr').hover(function() {
$(this).addClass('highlight1');

}, function() {
$(this).removeClass('highlight1');  
});

table {
width: 100%;
border-spacing: 0;
border-collapse: collapse;
}
td {
border: solid 1px black;
}
tr:nth-child(even) {
background-color: #F2F2F2;
}
tr:nth-child(odd) {
background-color: #FAFAFA;
}
.highlight1 td {
background-color: #FFD6F5;
}
.highlight2 td {
background-color: #CEF6CE;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='div2'>
<table>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>eeee</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>eeee</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>eeee</td>
</tr>
<tr>
<td>aaaa</td>
<td>bbbb</td>
<td>cccc</td>
<td>eeee</td>
</tr>    
</table>
</div>

Answer 2

这是一个仅使用 css 的演示，单击并按住该行以查看单击时的颜色。

.tftable {
font-size:12px;
color:#333333;
width:100%;
border-width: 1px;
border-color: #729ea5;
border-collapse: collapse;
}
.tftable th {
font-size:12px;
background-color:#acc8cc;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
text-align:left;
}
.tftable tr {
background-color:#d4e3e5;
}
.tftable td {
font-size:12px;
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #729ea5;
}
/*  Define the background color for all the ODD background rows  */
.tftable tr:nth-child(odd) {
background: #b8d1f3;
}
/*  Define the background color for all the EVEN background rows  */
.tftable tr:nth-child(even) {
background: #dae5f4;
}
.tftable tr:hover {
background-color:#ffffff;
}
.tftable tr:active {
background-color:#ccc;
}

<table class="tftable" border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
</tr>
<tr>
<td>Row:1 Cell:1</td>
<td>Row:1 Cell:2</td>
<td>Row:1 Cell:3</td>
<td>Row:1 Cell:4</td>
<td>Row:1 Cell:5</td>
</tr>
<tr>
<td>Row:2 Cell:1</td>
<td>Row:2 Cell:2</td>
<td>Row:2 Cell:3</td>
<td>Row:2 Cell:4</td>
<td>Row:2 Cell:5</td>
</tr>
<tr>
<td>Row:3 Cell:1</td>
<td>Row:3 Cell:2</td>
<td>Row:3 Cell:3</td>
<td>Row:3 Cell:4</td>
<td>Row:3 Cell:5</td>
</tr>
<tr>
<td>Row:4 Cell:1</td>
<td>Row:4 Cell:2</td>
<td>Row:4 Cell:3</td>
<td>Row:4 Cell:4</td>
<td>Row:4 Cell:5</td>
</tr>
<tr>
<td>Row:5 Cell:1</td>
<td>Row:5 Cell:2</td>
<td>Row:5 Cell:3</td>
<td>Row:5 Cell:4</td>
<td>Row:5 Cell:5</td>
</tr>
<tr>
<td>Row:6 Cell:1</td>
<td>Row:6 Cell:2</td>
<td>Row:6 Cell:3</td>
<td>Row:6 Cell:4</td>
<td>Row:6 Cell:5</td>
</tr>
</table>