css悬停在表行不工作

我想实现表格行上的悬停效果，我在我的CSS上有以下代码。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中的图像。一切都很好。

来源

2011-08-05 naveen

您正在设置单个表格单元格上的背景（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; 
}

来源

2011-08-05 06:56:56 OverZealous

+1：谢谢你的解释。是的，悬停正在工作，但你的小提琴刚刚失去了altrow BG。 – naveen

另外，第二种方法的问题是，我希望图像只在第一个tds左上角出现。 – naveen

糟糕 - 我提交了错误的版本，现在试试链接！ – OverZealous

你的问题在于你设置了td元素的背景颜色，w它们在DOM树下面，因此这些颜色优先。

如果你申请的颜色，只是行，你会看到悬停显示：

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

来源

2011-08-05 06:57:17

+1：谢谢斯蒂芬我已经完成了。 – naveen

你可以将鼠标悬停它，其实，但它不会工作在较旧的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中的外观如何，因此您可能需要对该部分进行更多的调整。

来源

2011-08-05 06:59:18

+1谢谢。我只想在第一个TD的图像，所以这是一个问题。 – naveen

http://jsfiddle.net/BradleyStaples/TYjhA/1/ - 仅在第一个TD细胞上处理图像。 –

css悬停在表行不工作

回答

相关问题