将 CSS 悬停在 tbody 上(不带 th)

Question

我只想高亮显示我的表的body，并排除第一个tr（只包含th），我的表：

<table id = "routes">
<!-- this part will not be highlighted on hover-->
<tr>
  <th>env</th>
  <th>route</th>
</tr>

机身：

<!-- this part will be highlighted on hover -->
<tbody ng-repeat="i in list">
<tr>
  <td>{{i.id}}</td>
  <td>{{i.route}}</td>
</tr>

我的css适用于所有表（包括th）：

th, td{
  padding:12px;
}
tr:hover{
  backround-color:#f5f5f5;
}

谢谢。

Answer 1

由于您有包装正文的tbody元素，所以只需为标题添加thead并为tbody 应用css

tbody:hover {
  background-color: #f5f5f5;
}

<table>
  <thead>
    <tr>
      <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Row 1</td>
    </tr>
    <tr>
      <td>Row 2</td>
    </tr>
    <tr>
      <td>Row 3</td>
    </tr>
    <tr>
      <td>Row 4</td>
    </tr>
  </tbody>
</table>

Answer 2

这里有一个拼写错误，是background-color而不是backround-color

tr:hover{
  background-color:#f5f5f5;
}

你可以这样做

th, td{
  padding:12px;
}
tr:hover{
  background-color:red;
}
tr:first-child:hover{
  background-color:transparent;
}

Answer 3

在身体中添加一个类，并仅为该区域的TR提供样式。像

<tbody ng-repeat="i in list" class="myTableBody">

现在添加悬停效果如下。

.myTableBody tr:hover{
  background-color:#f5f5f5;
}

CSS样式的"background"一词中有拼写错误。

Answer 4

试试这个：

th, td {
padding:12px;
}
tbody > tr > td:hover {
  background-color: red;
}

Answer 5

尝试下面的css可能会对您有所帮助。

#routes tbody:hover{
  background-color : black;
  color : white;
}

Answer 6

您需要为第一个子<tr>设置css，如下

th, td{
  padding:12px;
}
tr:hover{
  backround-color:#f5f5f5;
}
tr:first-child:hover{
  backround-color:transparent;//or your default color
}

在上面的代码中，tr:hover将在所有<tr>上应用css，而tr:first-child:hover将在第一个<tr>上应用css。

---

或者，如果您使用的是<thead>和<tbody>标签，那么只需使用类似的css

tbody tr:hover{
  backround-color:#f5f5f5;
}

这将仅影响<tbody>下的tr。