Html 设置颜色时更改悬停时表格行的颜色

Html 设置颜色时更改悬停时表格行的颜色,html,css,hover,background-color,Html,Css,Hover,Background Color,我有一个由服务器根据数据库中的数据动态创建的http表。根据某些值,服务器设置表行style=“background color:#RRGGBB”。此值来自数据库中的字符串,因此CSS不是选项。 这一切都很好,但这会覆盖CSS,CSS设置了悬停在表行上的背景色 在这种情况下,如何更改悬停时表格行的颜色,同时保持与数据库中颜色的相似性 表tr:n子级(2n):悬停{ 背景颜色:银色; } 表tr:n子级(2n+1):悬停{ 背景颜色:灰色; } 表tr:第n个子项(2n){ 背景色:#DDDDE

我有一个由服务器根据数据库中的数据动态创建的http表。根据某些值,服务器设置表行
style=“background color:#RRGGBB”
。此值来自数据库中的字符串,因此CSS不是选项。
这一切都很好,但这会覆盖CSS,CSS设置了悬停在表行上的背景色

在这种情况下,如何更改悬停时表格行的颜色,同时保持与数据库中颜色的相似性

表tr:n子级(2n):悬停{
背景颜色:银色;
}
表tr:n子级(2n+1):悬停{
背景颜色:灰色;
}
表tr:第n个子项(2n){
背景色:#DDDDEE;
}
表tr:第n个子项(2n+1){
背景色:#CCDD;
}

第1行
第2行
第3行
第4行-带颜色,无悬停效果
第5行-带颜色,无悬停效果
第6行
第7行
第8行

您可以对悬停时的每个元素应用部分透明的框阴影

表格tr:悬停{
框阴影:插入0 0 99999像素rgba(0,0,0,0.2);;
}
表tr:第n个子项(2n){
背景色:#DDDDEE;
}
表tr:第n个子项(2n+1){
背景色:#CCDD;
}

第1行
第2行
第3行
第4行-带颜色,无悬停效果
第5行-带颜色,无悬停效果
第6行
第7行
第8行

您可以使用onMouseOver和onMouseOut事件悬停

onMouseOver="this.style.backgroundColor='grey'" 
onMouseOut="this.style.backgroundColor='#FFDDDD'"
表tr:n子级(2n):悬停{
背景颜色:银色;
}
表tr:n子级(2n+1):悬停{
背景颜色:灰色;
}
表tr:第n个子项(2n){
背景色:#DDDDEE;
}
表tr:第n个子项(2n+1){
背景色:#CCDD;
}

第1行
第2行
第3行
第4行-带颜色,无悬停效果
第5行-带颜色,无悬停效果
第6行
第7行
第8行

只需在悬停中添加td即可

表tr:n子(2n)td:hover{
背景颜色:银色;
}
表tr:n第n个子(2n+1)td:悬停{
背景颜色:灰色;
}
表tr:第n个子项(2n){
背景色:#DDDDEE;
}
表tr:第n个子项(2n+1){
背景色:#CCDD;
}

第1行
第2行
第3行
第4行-带颜色,无悬停效果
第5行-带颜色,无悬停效果
第6行
第7行
第8行

现在您想要什么?您只想在第4行和第5行上具有悬停效果?您可以使用!重要信息:覆盖悬停时的背景色。(像这样:背景色:#ddddee!important;@AmareshSM是的,没错。如果我能帮上忙的话,我不想使用
!important
。这不符合悬停颜色与原始颜色相似的规格。我将坚持使用框阴影。无论如何,谢谢你。你也可以使用onMouseOver和onMouseOut@FalcoGerI发现0.05 alpha更适用于我的情况。但非常感谢。我甚至不知道有像
box shadow
这样的东西存在