列和行的亮點

Question

我使用的伎倆CSS只在懸停表列的亮點來自https://css-tricks.com/simple-css-row-column-highlighting/

它通過

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

的工作完美，但不是條紋表

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

在這裏看到的例子：http://jsfiddle.net/615avo4v/

請幫我解決這個問題沒有JavaScript。

在此先感謝！

Answer 1

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

使用另一個僞元素，這次是偶數行的第一個td，並水平對齊。 （並且具有較低的z-索引）。

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