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）将所有行背景样式移动到tr 。

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

Answer 2

您遇到的问题是您在td元素上设置了背景颜色，这些元素位于DOM树的下方，因此这些元素的颜色优先。

如果您将颜色应用于该行，您将看到悬停显示：

.datatable .row
{
    background-color: #FFFFFF;
}
.datatable .altrow
{
    background-color: #EDF5FF;
}

Answer 3

实际上，你可以悬停它，但它在旧的IE中不会很好用。 您的问题是您的初始（非悬停）颜色被分配给TD元素，而不是TR。 修改你的CSS，这样做：

.datatable tr.row:hover, .datatable tr.altrow:hover
.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;
}

它工作正常。 不确定图像部分在每个TD中的外观如何，因此您可能需要对该部分进行更多调整。