html - CSS 中不正确的行和列突出显示

Question

我试图在悬停表格时同时突出显示特定的行和列。但不知何故，只有列的悬停覆盖了整个数据。

这是我的代码:

.planStat {
  overflow: hidden; 
}
.planStat tr:hover {
    background: #ffaa00;
 }
.planStat tr:hover td{
      position: relative; 
}
.planStat tr:hover td:hover::after {
      content: "";
      position: absolute;
      background-color: #ffa;
      left: 0;
      top: -5000px;
      height: 10000px;
      width: 100%;
      z-index: 1; 
}

<table class="planStat">
  <tr>
    <td align="right">Name</td>
    <td align="right">Wochenstunden</td>
    <td align="right">Arbeitstage</td>
  </tr>
  <tr>
    <td align="right">SOLL</td>
    <td align="right">IST</td>
    <td align="right">Diff</td>
  </tr>
</table>

还有 JS fiddle :https://jsfiddle.net/5kdgj6j7/

我哪里错了？我尝试了很多组合，但没有一个奏效。

对应的SASS代码

.planStat {
 overflow: hidden;
 tr:hover {
     background: #ffaa00;
     td, th {
         position: relative;
     }
 }
td:hover::after,
th:hover::after {
    content: "";
    position: absolute;
    background-color: #ffaa00;
    left: 0;
    top: -5000px;
    height: 10000px;
    width: 100%;
    z-index: -1;
}}

Answer 1

您需要将z-index设置为-1

.planStat {
  overflow: hidden; 
}
.planStat tr:hover {
    background: #ffaa00;
 }
.planStat tr:hover td{
      position: relative; 
}
.planStat td:hover::after {
      content: "";
      position: absolute;
      background-color: #ffa;
      left: 0;
      top: -5000px;
      height: 10000px;
      width: 100%;
      z-index: -1; 
}

<table class="planStat">
  <tr>
    <td align="right">Name</td>
    <td align="right">Wochenstunden</td>
    <td align="right">Arbeitstage</td>
  </tr>
  <tr>
    <td align="right">SOLL</td>
    <td align="right">IST</td>
    <td align="right">Diff</td>
  </tr>
  <tr>
    <td align="right">SOLL</td>
    <td align="right">IST</td>
    <td align="right">Diff</td>
  </tr>
  <tr>
    <td align="right">SOLL</td>
    <td align="right">IST</td>
    <td align="right">Diff</td>
  </tr>
  <tr>
    <td align="right">SOLL</td>
    <td align="right">IST</td>
    <td align="right">Diff</td>
  </tr>
</table>