html - 悬停在列和行上，具有多种背景颜色

Question

我知道这可以用行来完成，但我无法让它也适用于列。我需要能够对我的列进行颜色编码，但在所有列中保持相同的悬停颜色。下面是我目前的代码，我需要将第一列的背景颜色设置为灰色，并将其他所有内容保持为白色。同时在所有行和列中保持相同的悬停颜色。希望这是有道理的!

Codepen

.grey-column {
  background-color: grey;
}

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

Answer 1

已更新

我认为这对你有用。

我删除了background .grey-column 并添加了这个样式。

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

为您准备的工作样本。

.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,.grey-column: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>

如有任何疑问，请务必询问。希望这对您有所帮助。