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

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

为什么不起作用？
如何纠正？

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

Answer 1

您在单个表格单元格（td）上设置背景，该表格单元格呈现在tr之上。

如果您有两个选择：

1）将所有行背景样式移动到tr s。

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中的外观如何，因此您可能需要对该部分进行更多调整。

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

3 个答案: