HTML 表格如何突出显示除第一列之外的悬停行？

Question

Simple table:

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

What I like:

Answer 1

Use :not and :first-child to exclude the first cell like so:

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

Demo:

 #myTable { border-collapse: collapse; } #myTable td { width: 100px; border: 1px solid black; } #myTable tr:hover td:not(:first-child) { background: #ddd; }

 <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

If I'm understanding the end goal, target :hover on a non :first-child element, then also select all of the elements that come after it using the general sibling selector.

 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

Use the :first-child Selector and a :not .

For example:

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

You can use the :not with :firstchild like this:

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