css - CSS 中的表格悬停无法正常工作

Question

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

.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