Table 悬停在 CSS 中无法正常工作

Question

我有两行 table，一行有 class，另一行没有 class。我想将悬停属性添加到我的 table，但它只适用于没有 class 的行。我该怎么办？

.datagrid table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
.datagrid {
  font: normal 12px/150% B Yekan;
  background: #fff;
  overflow: hidden;
  border: 1px solid #36752D;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
  padding: 3px 10px;
}
.datagrid table thead th {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
  background: -moz-linear-gradient(center top, #36752D 5%, #275420 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
  background-color: #36752D;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  border-left: 1px solid #36752D;
}
.datagrid table tbody td {
  color: #275420;
  border-left: 1px solid #C6FFC2;
  font-size: 12px;
  font-weight: normal;
}
.datagrid table tbody .alt td {
  background: #DFFFDE;
  color: #275420;
}
.datagrid table tbody td:first-child {
  width: 35px;
  text-align: center;
}
.datagrid table tbody td:last-child {
  width: 35px;
  text-align: center;
}
.datagrid table tbody tr:last-child td {
  border-bottom: none;
}
.datagrid table tfoot td div {
  border-top: 1px solid #36752D;
  background: #DFFFDE;
}
.datagrid table tfoot td {
  padding: 0;
  font-size: 12px
}
.datagrid table tfoot td div {
  padding: 2px;
}
.datagrid table tfoot input {
  font-weight: bolder;
  cursor: pointer;
  display: inline;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin: 1px;
  color: #FFFFFF;
  border: 1px solid #36752D;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
  background: -moz-linear-gradient(center top, #36752D 5%, #275420 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
  background-color: #36752D;
}
.datagrid table tbody tr:hover {
  background: #FFF380;
}
.datagrid table tbody .alt:hover {
  background: #FFF380;
}

<div class="datagrid">
  <table>
    <thead>
      <tr>
        <th style="text-align: center;width: 10%;">row</th>
        <th style="text-align: center;width: 20%;">date</th>
        <th style="text-align: center;width:10%;">correct</th>
        <th style="text-align: center;width: 10%;">wront</th>
        <th style="text-align: center;width: 10%;">blank</th>
        <th style="text-align: center;width: 10%;">score</th>
        <th style="text-align: center;width: 30%;">detail</th>
      </tr>
    </thead>
    <tbody>
      <tr class="alt">
        <td>1</td>
        <td>das</td>
        <td>correct</td>
        <td>wrong</td>
        <td>blank</td>
        <td>score</td>
        <td><a href "#">page<a></td>
</tr>    
<tr>
 <td>1</td><td>das</td><td>correct</td>
    <td>wrong</td><td>blank</td>
    <td>score</td>
    <td><a href"#">page<a></td>
</tr> 
</tbody>
</table></div>

Answer 1

您的 tr 背景实际上正在改变，但是您已经为 tr 中的 td 定义了背景颜色...因此，您看不到改变后的颜色！ :)

.datagrid table {
  border-collapse: collapse;
  text-align: center;
  width: 100%;
}
.datagrid {
  font: normal 12px/150% B Yekan;
  background: #fff;
  overflow: hidden;
  border: 1px solid #36752D;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}
.datagrid table td,
.datagrid table th {
  padding: 3px 10px;
}
.datagrid table thead th {
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
  background: -moz-linear-gradient(center top, #36752D 5%, #275420 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
  background-color: #36752D;
  color: #FFFFFF;
  font-size: 15px;
  font-weight: bold;
  border-left: 1px solid #36752D;
}
.datagrid table tbody td {
  color: #275420;
  border-left: 1px solid #C6FFC2;
  font-size: 12px;
  font-weight: normal;
}
.datagrid table tbody .alt {
  background: #DFFFDE;
  color: #275420;
}
.datagrid table tbody td:first-child {
  width: 35px;
  text-align: center;
}
.datagrid table tbody td:last-child {
  width: 35px;
  text-align: center;
}
.datagrid table tbody tr:last-child td {
  border-bottom: none;
}
.datagrid table tfoot td div {
  border-top: 1px solid #36752D;
  background: #DFFFDE;
}
.datagrid table tfoot td {
  padding: 0;
  font-size: 12px
}
.datagrid table tfoot td div {
  padding: 2px;
}
.datagrid table tfoot input {
  font-weight: bolder;
  cursor: pointer;
  display: inline;
  text-decoration: none;
  display: inline-block;
  padding: 6px 12px;
  margin: 1px;
  color: #FFFFFF;
  border: 1px solid #36752D;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #36752D), color-stop(1, #275420));
  background: -moz-linear-gradient(center top, #36752D 5%, #275420 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#36752D', endColorstr='#275420');
  background-color: #36752D;
}
.datagrid table tbody tr:hover {
  background: #FFF380;
}
.datagrid table tbody .alt:hover {
  background: #FFF380;
}

<div class="datagrid">
  <table>
    <thead>
      <tr>
        <th style="text-align: center;width: 10%;">row</th>
        <th style="text-align: center;width: 20%;">date</th>
        <th style="text-align: center;width:10%;">correct</th>
        <th style="text-align: center;width: 10%;">wront</th>
        <th style="text-align: center;width: 10%;">blank</th>
        <th style="text-align: center;width: 10%;">score</th>
        <th style="text-align: center;width: 30%;">detail</th>
      </tr>
    </thead>
    <tbody>
      <tr class="alt">
        <td>1</td>
        <td>das</td>
        <td>correct</td>
        <td>wrong</td>
        <td>blank</td>
        <td>score</td>
        <td><a href "#">page<a></td>
</tr>    
<tr>
 <td>1</td><td>das</td><td>correct</td>
    <td>wrong</td><td>blank</td>
    <td>score</td>
    <td><a href"#">page<a></td>
</tr> 
</tbody>
</table></div>

该代码应该可以工作...我只是从 tr td 中删除了样式并将其更改为仅 td

Answer 2

您实际上可以使用 CSS 轻松完成此操作！

这其实是一个很简单的问题，不过我会为你详细解释一下。

您的 table 行设置了背景色，您的 table 单元格也是如此。因此，如果您将鼠标悬停在 table 行上，则会更改 table 行的背景颜色，而 table 单元格的背景颜色保持不变。这就是您没有看到任何变化的原因。

您可以通过两种方式解决此问题：

将 table 单元格的背景颜色设置为 "transparent" 并允许行的背景颜色出现。
1. （如果您的 table 单元格是多种颜色，此方法是最好的），像这样设置 table 行的悬停 class：

.datagrid tr:hover td { 背景色：#``f2e8da； } 使用这样的样式规则设置，当 table 行悬停时，它会影响其子单元格的颜色！

Answer 3

你必须像这样给 td 添加背景颜色：

.datagrid table tbody .alt:hover td {
  background: #FFF380!important;
}

Answer 4

添加此代码

  .datagrid table tbody .alt:hover td {
        background: #fff380 none repeat scroll 0 0;
    }

而不是

.datagrid table tbody .alt:hover {
  background: #FFF380;
}

Answer 5

这对我来说也很好用:

  .table-hover tbody tr:hover td {
        background: #f9f9f9;
    }

Table 悬停在 CSS 中无法正常工作

Table hover in CSS doesn't work properly

css

html-table

hover