CSS 中的表格悬停无法正常工作答案

【问题标题】：Table hover in CSS doesn't work properlyCSS 中的表格悬停无法正常工作
【发布时间】：2015-12-14 07:03:48
【问题描述】：

我有两排的桌子，一排有课，另一排没有课。我想将悬停属性添加到我的表中，但它只适用于没有类的行。我该怎么办？

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

【问题讨论】：

您已将background 分配给<td> 并更改background 的<tr> ??

标签： css html-table hover

【解决方案1】：

这对我来说也很好用：

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

【讨论】：

【解决方案2】：

添加此代码

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

代替

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

【讨论】：

【解决方案3】：

您必须像这样将背景颜色添加到 td：

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

【讨论】：

【解决方案4】：

您实际上可以使用 CSS 轻松做到这一点！

这其实是一个很简单的问题，不过我会稍微详细的给大家解释一下。

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

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

将表格单元格的背景颜色设置为“透明”，并允许行的背景颜色出现。
1. （如果您的表格单元格是多种颜色，则此方法最好），设置表格行的悬停类如下：

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

【讨论】：

【解决方案5】：

您的 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

【讨论】：