高亮显示表中的列和行:: after和:: before不起作用

Question

当鼠标位于单元格上时，我要突出显示相应的列和行。我也想突出显示鼠标在玩家1的动作字母上的行，并突出显示鼠标在玩家2的动作字母上的列。

这是我尝试的代码：

th {
  font-weight: normal;
  align-content: center;
}

td {
  border: 1px black solid;
  padding: 5px;
  text-align: center;
  height: 1.1cm;
  width: 1.1cm;
}

.col {
  width: 1.1cm;
}

.row {
  height: 1.1cm;
}

.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}

.rotate div {
  -moz-transform: rotate(-90.0deg);
  /* FF3.5+ */
  -o-transform: rotate(-90.0deg);
  /* Opera 10.5 */
  -webkit-transform: rotate(-90.0deg);
  /* Saf3.1+, Chrome */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);
  /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)";
  /* IE8 */
  margin-left: -0.5cm;
  margin-right: -0.5cm;
}

.float-left {
  width: 25%;
  float: left;
}

tr.hl:hover th:not([rowspan]),
tr.hl:hover td {
  background-color: yellow;
}

td:hover::before {
  content: '';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  width: 100%;
  top: 0;
}

td:hover::after,
.col:hover::after {
  content: '';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  height: 100%;
  bottom: 0;
}

<table id="player1">

  <tr style="color: red">
    <th colspan=5 style="text-align: right">Player 1's Payoffs </th>
  </tr>
  <tr>
    <th colspan=2 rowspan=2></th>
    <th colspan=3 style="font-size: smaller; text-align: center">Player 2's actions</th>
  </tr>

  <tr style="text-align: center">
    <th class="col">d</th>
    <th class="col">e</th>
    <th class="col">f</th>
  </tr>


  <tr style="color: red" class="hl">
    <th rowspan=3 class="rotate" style="font-size: smaller;">
      <div>Player 1's actions</div>
    </th>
    <th class="row">a</th>
    <td>10</td>
    <td>4</td>
    <td>16</td>
  </tr>

  <tr style="color: red" class="hl">
    <th class="row">b</th>
    <td>20</td>
    <td>8</td>
    <td>0</td>
  </tr>
  <tr style="color: red" class="hl">
    <th class="row">c</th>
    <td>4</td>
    <td>18</td>
    <td>12</td>
  </tr>

</table>

当前，我可以突出显示行，但不能突出显示列。 我想知道如何在CSS中做到这一点。或其他一些方式。

Answer 1

您需要设置宽度并增加高度，并溢出可能溢出的东西。

可能的方法

.rotate {
  writing-mode: vertical-lr;
  writing-mode: sideways-lr;
  /* if understood */
}

th {
  font-weight: normal;
  align-content: center;
}

td {
  border: 1px black solid;
  padding: 5px;
  text-align: center;
  height: 1.1cm;
  width: 1.1cm;
  box-shadow:0 0 0 2px white;
}

.col {
  width: 1.1cm;
}

.row {
  height: 1.1cm;
}

.rotate {
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  width: 1.5em;
}

.float-left {
  width: 25%;
  float: left;
}

tr.hl:hover th:not([rowspan]),
tr.hl:hover td {
  background-color: yellow;
}

td:hover::before {
  content: '';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  width: 100%;
  top: 0;
}

td:hover::after,
.col:hover::after {
  content: 'j';
  position: absolute;
  background-color: yellow;
  z-index: -1;
  height: 2000%;
  width: 100%;
  bottom: -1000%;
  left: 0;
}

th,
td {
  position: relative;
}

#player1 {
  overflow: hidden;
}

thead th {
  background: white;
  box-shadow: 0 0 0 2px white;
}

<table id="player1">
  <thead>
    <tr style="color: red">
      <th colspan=5 style="text-align: right">Player 1's Payoffs </th>
    </tr>
    <tr>
      <th colspan=2></th>
      <th colspan=3 style="font-size: smaller; text-align: center">Player 2's actions</th>
    </tr>


  </thead>
  <tr style="text-align: center">
    <th colspan=2></th>
    <th class="col">d</th>
    <th class="col">e</th>
    <th class="col">f</th>
  </tr>

  <tr style="color: red" class="hl">
    <th rowspan=3 class="rotate" style="font-size: smaller;">
      <div>Player 1's actions</div>
    </th>
    <th class="row">a</th>
    <td>10</td>
    <td>4</td>
    <td>16</td>
  </tr>

  <tr style="color: red" class="hl">
    <th class="row">b</th>
    <td>20</td>
    <td>8</td>
    <td>0</td>
  </tr>
  <tr style="color: red" class="hl">
    <th class="row">c</th>
    <td>4</td>
    <td>18</td>
    <td>12</td>
  </tr>

</table>