单击和悬停时操纵表行颜色，使用斑马行颜色时发生冲突

Question

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

$("#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

这是一个仅使用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>

Answer 2

一般定义tr:nth-child(even)的优先级高于highlight1之类。但是，您可以通过着色选定/单击行的单元格来进行操作。请参阅以下示例：

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;