如何使用css在html表格中创建悬停效果？

我尝试使用css创建悬停效果，如果用户在表格的行中悬停，它会将背景颜色更改为红色。但我注意到，当我悬停行时，不是用红色填充整行，而是只填充单个单元格

这是我的密码：

.GridviewScrollHeader TH，
.GridviewScrollHeader TD{
填充物：5px；
字体大小：粗体；
空白：nowrap；
右边框：1px实心#AAAAA；
边框底部：1px实心#AAAAA；
背景色：#EFEF；
垂直对齐：底部对齐；
文本对齐：左对齐；
}
.GridviewScrollItem TD{
填充物：5px；
空白：nowrap；
右边框：1px实心#AAAAA；
边框底部：1px实心#AAAAA；
背景色：#FFFFFF；
}
.GridviewScrollItem TD:悬停{
背景色：红色；
}

试验
身体，
运输署{
字体系列：Tahoma、Arial、Verdana；
字体大小：正常；
字体大小：12px；
颜色：#333333；
}
产品
标价
标准成本
包裹
安全库存水平
再订货点
销售起始日期
名称
数
重量
大小
HL山框架-黑色，38
FR-M94B-38
1349.6000
739.0410
2.68
38
500
375
2005年1月7日12:00:00上午
HL山框-银色，38
FR-M94S-38
1364.5000
747.2002
2.68
38
500
375
2005年1月7日12:00:00上午

之所以会发生这种情况，是因为您仅将悬停效果设置为td元素，而不是整行。如果您从css中删除

td

，并且只对

tr

元素应用鼠标悬停，那么它会起作用

注意：必须删除

td

元素的特定背景色，因为它们会覆盖

tr:hover

效果。请看下面的工作片段

.GridviewScrollHeader th、.GridviewScrollHeader td{
填充物：5px；
字体大小：粗体；
空白：nowrap；
右边框：1px实心#AAAAA；
边框底部：1px实心#AAAAA；
背景色：#EFEF；
垂直对齐：底部对齐；
文本对齐：左对齐；
}
.GridviewScrollItem TD{
填充物：5px；
空白：nowrap；
右边框：1px实心#AAAAA；
边框底部：1px实心#AAAAA；
}
.GridviewScrollItem{
背景：#fff；
}
.GridviewScrollItem:悬停{
背景色：红色；
}

产品
标价
标准成本
包裹
安全库存水平
再订货点
销售起始日期
名称
数
重量
大小
HL山框架-黑色，38
FR-M94B-38
1349.6000
739.0410
2.68
38
500
375
2005年1月7日12:00:00上午
HL山框-银色，38
FR-M94S-38
1364.5000
747.2002
2.68
38
500
375
2005年1月7日12:00:00上午

将悬停的css更改为下面的代码

.GridviewScrollItem:hover TD
{
    background-color: red;
}

---

请检查此

您只需将鼠标悬停在整个表格行上表示您的

tr

，现在您只需将鼠标悬停在

td

只需将悬停添加到您的行：

.GridviewScrollItem:hover {
    background-color: red;
}

.GridviewScrollHeader th、.GridviewScrollHeader td{
填充物：5px；
字体大小：粗体；
空白：nowrap；
右边框：1px实心#AAAAA；
边框底部：1px实心#AAAAA；
背景色：#EFEF；
垂直对齐：底部对齐；
文本对齐：左对齐；
}
.GridviewScrollItem TD{
填充物：5px；
空白：nowrap；
右边框：1px实心#AAAAA；
边框底部：1px实心#AAAAA；
}
.GridviewScrollItem{
背景：#fff；
}
.GridviewScrollItem:悬停{
背景色：红色；
}

产品
标价
标准成本
包裹
安全库存水平
再订货点
销售起始日期
名称
数
重量
大小
HL山框架-黑色，38
FR-M94B-38
1349.6000
739.0410
2.68
38
500
375
2005年1月7日12:00:00上午
HL山框-银色，38
FR-M94S-38
1364.5000
747.2002
2.68
38
500
375
2005年1月7日12:00:00上午

我尝试的是不同的，可能有一些问题，但我不能说我没有尝试，我确实从其他人那里看到了更好的结果：）

CSS:

HTML没有改变，它似乎依赖于不透明度，但这是我的结果，有些人可能不同意

.GridviewScrollHeader TH, .GridviewScrollHeader TD{
    padding: 5px;
    font-weight: bold;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #EFEFEF;
    vertical-align: bottom;
    text-align: left;
}

.GridviewScrollItem TD{
    padding: 5px;
    white-space: nowrap;
    border-right: 1px solid #AAAAAA;
    border-bottom: 1px solid #AAAAAA;
    background-color: #FFFFFF;
}

/* The :nth-child() Does not work on some versions of IE 
removing it will only let you highlight other fields there on until the end of the "td" 
just add overflow-x:hidden if you remove the nth child and make the table full screen width by setting body margin to 0*/

.GridviewScrollItem TD:nth-child(1):hover{
    background-color: red;
    width:98.4%; /* If you ever Change the margins make sure to change this accordingly */ /* full screen is 100% but take note of margins */
    position:absolute;
    opacity:0.5; /* Does not work in IE9 or less */ /* Check for other opacity attributes for older IE Browsers */
    font-weight:bold; /* To Darken text to still be visable */
}