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

如果我理解的最终目标，目标: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 2

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

例如：

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

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

<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

您可以:firstchild使用:not这样的：

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

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

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

Answer 4

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