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