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小提琴：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>

Answer 2

使用jQuery毫无疑问。也许不是一个只有css的解决方案，而是更少的代码，更容易阅读：

$('td').hover(function(){
	var td = $(this);
  td.addClass('highlight') // the hovered td
  	.siblings().addClass('highlight'); // the row
  td.parent().siblings()  // other tr's
              .children()  // their td's
              .eq(td.index()) // with the same index as the original td
              .addClass('highlight'); // TADAAAA :-)
}, function(){
	var td = $(this);
  td.removeClass('highlight')
  	.siblings().removeClass('highlight');
  td.parent().siblings().children().eq(td.index()).removeClass('highlight');
});

.planStat td.highlight {
    background: #ffaa00;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

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

2 个答案: