css悬停在一个不起作用的表行上

Question

我试图在表行上实现悬停效果,我在我的CSS上有以下代码.

.datatable tr.row:hover, .datatable tr.altrow:hover {
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

但我认为根本没有应用.我的问题是

1. 为什么不起作用？
2. 怎么纠正这个？

为清楚起见,这里是小提琴http://jsfiddle.net/naveen/UPhRE/
请不要介意css中的图像.一切都很好.

Answer 1

您正在设置单个表格单元格(td)的背景,该单元格呈现在tr.

如果您有两个选择:

1)将所有行背景样式移动到trs.

2)更新你的CSS看起来像这样:

.datatable tr.row:hover td, .datatable tr.altrow:hover td {
    color: #000;
    background-color: #FFFACD;
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}

这将呈现行上的颜色:http: //jsfiddle.net/R9YGw/3/

更新:仅包含第一个单元格上图像的更新:

.datatable tr.row:hover td, .datatable tr.altrow:hover td {
    color: #000;
    background-color: #FFFACD;
}
.datatable tr.row:hover td:first-child, .datatable tr.altrow:hover td:first-child {
    background-image: url(../Images/bullet.gif);
    background-repeat: no-repeat;
}