CSS中的表格悬停无法正常运行

时间：2015-09-17 12:01:39

标签： css html-table hover

我有两行表，一行有另一类没有类。 我想将hover属性添加到我的表中，但它只在没有类的行上工作。 我该怎么办？

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

5 个答案:

答案 0 :(得分：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

答案 1 :(得分：1)

您必须将背景颜色添加到td，如下所示：

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

答案 2 :(得分：0)

你可以用CSS很容易地做到这一点！

这实际上是一个非常简单的问题，但我会为您解释一下细节。

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

你可以通过两种方式解决这个问题：

  1. 将表格单元格的背景颜色设置为“透明”，并允许该行的背景颜色显示。

    1. （如果您的表格单元格是多种颜色，此方法最好），设置您的表格行的悬停类如下：

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

答案 3 :(得分：0)

添加此代码

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

而不是

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

答案 4 :(得分：0)

这对我也很好：

  .table-hover tbody tr:hover td {
        background: #f9f9f9;
    }
相关问题
最新问题