HTML表格除了第一列以外，如何在悬停时突出显示行？

Question

简单表：

<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>

我喜欢什么：

Answer 1

#myTable tr:hover td:not(:first-child){
    background: #ddd;
}

Answer 2

如果我理解最终目标，请在非:hover元素上定位:first-child，然后使用常规同级选择器选择其后的所有元素。

td:not(:first-child):hover, td:not(:first-child):hover ~ td {
  background: #eee;
}

<table id="myTable">
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>X</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>X</td>
  </tr>
</table>

Answer 3

您可以将:not与:firstchild一起使用，如下所示：

＆＃13;

＆＃13;

$("#myTable tr").hover(
    function () { $(this).find("td:not(:first-child)").addClass('hoverclass') }, 
    function () { $(this).find("td:not(:first-child)").removeClass('hoverclass') }
);

＆＃13;

#myTable tr:hover td:not(:first-child)
{
  background-color: #444444;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 4

使用:first-child选择器和:not。

例如：

#myTable tr:hover td:not(:first-child) {
    background: #999;
}

＆＃13;

＆＃13;

#myTable tr:hover td:not(:first-child) {
    background: #999;
}

＆＃13;

<table id="myTable">
<tr><td>A</td><td>B</td><td>C</td></tr>
<tr><td>1</td><td>2</td><td>X</td></tr>
<tr><td>3</td><td>4</td><td>X</td></tr>
</table>

＆＃13;

＆＃13;

＆＃13;