Table hover in CSS doesn't work properly - css

Question

I have table with two row, one row has class another has no class.
I want add hover property to my table but it just work on row without class.
what should I do?
.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

your tr background is actually getting changed, but you have defined a background color for the td in the tr... because of that, you can't see the changed color! :)
.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>
that code should work... ijust removed the styling from the tr td and changed it to just the td

Answer 2

You have to add the background color to the td like this:
.datagrid table tbody .alt:hover td {
background: #FFF380!important;
}

Answer 3

Add this code
.datagrid table tbody .alt:hover td {
background: #fff380 none repeat scroll 0 0;
}
Instead of
.datagrid table tbody .alt:hover {
background: #FFF380;
}

Answer 4

You can actually do this quite easily with CSS!
This is actually a really simple problem, but I'll explain it with a bit of detail for you.
You have your table row setup with background-colors, as do your table cells. So if you were to hover over a table row, that would change the table row's background-color, leaving the table cell's background color the same. This is why you aren't seeing any changes happening.
You can go about this in two ways:
Set the background-color of your table cells to "transparent" and allow the background-color of the row to come forward.
(This method's the best if your table cells are multiple colors), setup your table row's hover class like this:
.datagrid tr:hover td
{
background-color:#``f2e8da;
}
With your style rule setup like this, when the table row's hovered over, it will effect its child cells color!

Answer 5

That also work fine for me :
.table-hover tbody tr:hover td {
background: #f9f9f9;
}