Question

这是我用于设置HTML表格样式的CSS。我想有些事情正在弄乱悬停状态。

.tg {
  border-collapse:collapse;
  border-spacing:0;
  border-color:#ccc;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 150px;
  height: 10px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  color: #333;
  background-color: #fff;
}

tr:hover {
  background-color:red !important;
}

由于在悬停线条时没有获得红色背景所需的效果。这是HTML：

<table class="tg">
  <tr class='tr-031e'>
    <th class="tg-031e"><b>№</b></th>
    <th class="tg-031e"><b>Name</b></th>
    <th class="tg-031e"><b>Age</b></th>
  </tr>
  <tr class='tr-031e'>
    <td class="tg-031e"><input type='checkbox' name='person'></td>
    <td class="tg-031e">Guy</td>
    <td class="tg-031e">18</td>
  </tr>
</table>

Answer 1

这个怎么样，

tr:hover td { background-color:red; }

Answer 2

试试这个：

tr:hover, td:hover {
    background-color:red;
}

修改

在.tg td中，删除：

background-color: #fff;

<强> JSFiddle Demo

Answer 3

<td>存在于<tr>顶部的图层上，因此，您的background-color: white覆盖了红色。

.tg {
  border-collapse:collapse;
  border-spacing:0;
  border-color:#ccc;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  width: 150px;
  height: 10px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  color: #333;
}

tr {
      background-color: #fff;
}

tr:hover {
  background-color:red !important;
}

无法将悬停状态应用于HTML表

3 个答案: