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>