CSS中條形表中的懸停時，列和行突出顯示

Question

我在https://css-tricks.com/simple-css-row-column-highlighting/中將技巧用於CSS僅懸停在表列上

這是完美的工作，但不適用於通過

tr:nth-of-type(odd) {
    background-color: #f0f0f0;
}

突出顯示不適用於帶有背景的行中的上部和下部單元格。

在此處查看示例： http : //jsfiddle.net/615avo4v/

請幫助我解決不使用JavaScript的問題。

提前致謝！

Answer 1

更改設置剝離背景的方式。

這次在偶數行的第一個td上使用另一個偽元素，並水平對齊。 （以及較低的z-index）。

 * { margin: 0; padding: 0; } table { width: 100%; border-spacing: 0; color: #212121; text-align: left; overflow: hidden; } table>tbody>tr>td { padding: 10px; font-size: 14px; position: relative; } table>tbody>tr:hover { padding: 20px; background-color: #ffa !important; } tr:nth-child(even) td:first-child::before { content: ""; position: absolute; background-color: lightgreen; top: 0; left: -5000px; width: 10000px; height: 100%; z-index: -10; } td:hover::after { content: ""; position: absolute; background-color: #ffa; left: 0; top: -5000px; height: 10000px; width: 100%; z-index: -1; } 

  <table> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> <tr> <td>col1</td> <td>col2</td> <td>col3</td> <td>col4</td> <td>col5</td> <td>col6</td> <td>col7</td> <td>col8</td> </tr> </table>