Question

我的表格样式如下：http://jsfiddle.net/naveen/SGQBF/

在悬停tr时，我想在第一个或 tr 上显示项目符号。
这在Firefox中正如预期的那样工作。但是在Chrome中，每个td都会显示子弹。

我的问题是

我的CSS怎么了？
我怎么能纠正这个？

Answer 1

将规则更改为：

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

Answer 2

css看起来很好。为什么chrome表现不正确我不知道，但快速解决方法是将子弹从tr移到tr第一个td。 Fiddle

Answer 3

我认为这是一个错误。

这是一个解决方法。

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

Answer 4

这将是经过编辑的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>

这将是编辑后的CSS（Bold是编辑后的内容）：

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

在WebKit和Firefox中不同的CSS渲染背景

4 个答案: