Multiple Background Colors

Hover on Column and Rows, With Multiple Background Colors

I have removed the background .grey-column and added this style.

.grey-column:after {
  background-color: grey;
  position:absolute;
  left:0;
  right:0;
  z-index:-20;
  top:0;
  bottom:0;
  content:'';
 }
 .grey-column{
  position:relative;
 }

working sample for you.

.grey-column:after {
  background-color: grey;
  position:absolute;
  left:0;
  right:0;
  z-index:-20;
  top:0;
  bottom:0;
  content:'';
}
.grey-column{
 position:relative;
}

.data-table {
  overflow: hidden;
  border: solid black;
  border-collapse: collapse;
  border-width: 1px 2px 2px 1px;
}

.data-cell {
  padding: 10px;
  font-size: 14px;
  position: relative;
  border: solid black;
  border-width: 1px 1px 1px 1px;
}

.data-row:hover {
  padding: 10px;
  background-color: #ffa;
}

.data-cell::before {
  content: "";
  position: absolute;
  top: 0;
  left: -5000px;
  width: 10000px;
  height: 100%;
  z-index: -10;
}

.data-cell:hover::after {
  content: "";
  position: absolute;
  background-color: #ffa;
  left: 0;
  top: -5000px;
  height: 10000px;
  width: 100%;
  z-index: -5;
}
<table class="data-table">
  <tbody>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
    <tr class="data-row">
      <td class="grey-column">I should change to hover color</td>
      <td class="data-cell">Cell 2</td>
      <td class="data-cell">Cell 3</td>
      <td class="data-cell">Cell 4</td>
    </tr>
  </tbody>
</table>

LEAVE A REPLY

Please enter your comment!
Please enter your name here