I have a table styled like this: http://jsfiddle.net/naveen/SGQBF/
On hovering the tr
s, I would like to sh开发者_开发知识库ow a bullet at the first td or tr.
td
.
My questions are
- Whats wrong with my CSS?
- How could I correct that?
Changed your rules to this:
.datatable tr.row:hover , .datatable tr.altrow:hover{
color: #000;
background-color: #FFFACD;
/* remove background image */
}
.datatable tr.row:hover > td:first-child, .datatable tr.altrow:hover > td:first-child {
background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
background-repeat: no-repeat;
}
I think that's a bug.
Here is a work-around.
.datatable tr.row:hover, .datatable tr.altrow:hover {
background-color: #FF0000;
color: #000;
}
.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
color: #000;
background-color: #FF0000;
background-image: url(http://quenshsolutions.ie/Images/bullet.gif);
background-repeat: no-repeat;
background-position: top left
}
The css looks fine to me. Why chrome behaves incorrectly I don't know but a quick fix would be to move the bullet from tr to tr first td. Fiddle
This would be the edited HTML:
<table class="datatable">
<tr>
<th class="sortasc-header"><a href="#">Name</a></th>
<th>Profession</th>
<th class="sortdesc-header"><a href="#">Age</a></th>
</tr>
<tr class="row">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="altrow">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="row">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="altrow">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="row">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="altrow">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="row">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="altrow">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="row">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="altrow">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
<tr class="row">
<td class="first">Naveen</td>
<td>Consultant</td>
<td>24 years</td>
</tr>
</table>
And this would be the edited CSS (Bold is what was edited):
.datatable
{
border: solid 1px #7f7f7f;
color:#000000;
width: 100%;
}
.datatable th
{
background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px 0px;
border-color: #989898 #cbcbcb #989898 #989898;
border-style: solid solid solid none;
border-width: 1px 1px 1px medium;
color: #000;
padding: 4px 5px 4px 10px;
text-align: center;
vertical-align: bottom;
font-size: 14px;
}
.datatable th a
{
color:#00002B;
padding-right:18px;
text-decoration: none;
}
.datatable th.sortasc-header, .datatable th.sortdesc-header {
background: url(http://quenshsolutions.ie/Images/sprite.png) repeat-x 0px -100px;
}
.datatable th.sortasc-header a {
background:url(http://quenshsolutions.ie/Images/asc.gif) right center no-repeat;
}
.datatable th.sortdesc-header a {
background:url(http://quenshsolutions.ie/Images/desc.gif) right center no-repeat;
}
.datatable tr {
font-size: 12px;
color:#777;
}
.datatable .row td, .datatable .altrow td
{
text-align:left;
padding: 4px 10px 4px 10px;
border-right: solid 1px #cbcbcb;
}
.datatable .row
{
background-color: #FFFFFF;
}
.datatable .altrow
{
background-color: #EDF5FF;
}
.datatable .row td.sortasc-row, .datatable .row td.sortdesc-row
{
background-color: #EDF5FF;
}
.datatable .altrow td.sortasc-row, .datatable .altrow td.sortdesc-row
{
background-color: #DBEAFF;
}
**.datatable tr.row td.first:hover, .datatable tr.altrow td.first:hover{
color: #000;
background-color: #FFFACD;
background-image:url(http://quenshsolutions.ie/Images/bullet.gif);
background-repeat: no-repeat;
}
.datatable tr.row:hover, .datatable tr.altrow:hover{
color: #000;
background-color: #FFFACD;
background-repeat: no-repeat;
}**
.datatable .row td.first { padding-left:10px; }
.datatable th.first { padding-left:10px; }
精彩评论