CODEWITHSUNDEEP
htmlcss
Ankur Sinha
Ankur Sinha

Reputation: 6669

Incorrect Row and Column highlighting in CSS

I am trying to highlight the particular row and column at the same time on hovering a table. But somehow only the hovering of column is covering the entire data.

Here is my code:

.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>

Also the JS fiddle: https://jsfiddle.net/5kdgj6j7/

Where am I going wrong? I tried a lot of combinations, none worked.

Corresponding SASS Code

.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;
}}

Upvotes: 0

Views: 73

Answers (2)

Ronen Cypis
Ronen Cypis

Reputation: 21470

It is a no brainer using jQuery. Maybe not a css only solution, but much less code, and easier to read:

$('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>

Upvotes: -1

yunzen
yunzen

Reputation: 33439

You need to set the z-index to -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>

Upvotes: 3

Related Questions