使用CSS突出显示整行

Question

我正在使用以下代码突出显示表行，但未突出显示行。

当我将鼠标悬停在实际字体上时，它仅突出显示当前单元格，并且仅将字体颜色变为白色。

我有什么想念的吗？

HTML和CSS：

 .schedule tr:not(:first-child) :hover{ font-weight:bold; cursor:default; background-color:#B80D9F; color:white; } .schedule{ border-spacing:0px; } 

  <table class="schedule" width="90%"> <tbody> <tr> <td style="width:50%">hello1</td> <td style="width:50%">123</td> </tr> <tr> <td style="width:50%">hello2</td> <td style="width:50%">123</td> </tr> </tbody> </table> 

更新：

下面的所有答案都是正确的，但不能解决第二个问题，即使用<a>标记时字体不会变为白色。

为什么字体颜色不变？

Answer 1

删除:hover之前的空格，因为实际上您尝试访问tr的子级，而不是tr本身

和颜色设置好的与自定义样式a ，你必须在添加另一个CSS选择a来改变它的颜色：

.schedule tr:not(:first-child):hover a{
   color:white;
}

Answer 2

如下更改您的css，您的规则有误：-

.schedule tr:not(:first-child):hover{
    font-weight:bold;
    cursor:default;
    background-color:#B80D9F;
    color:white;
}

它可能会帮助您。

Answer 3

一切已更新。请查看工作链接并享受！！ :hover之前的间距问题

HTML：

<table class="schedule" width="90%">
<tbody>
    <tr>
        <td style="width:50%">hello1</td>
        <td style="width:50%">123</td>
    </tr>
    <tr>
        <td style="width:50%"><a href="">hello2</a></td>
        <td style="width:50%"><a href="">123</a></td>
    </tr>
</tbody>

CSS：

 .schedule tr:not(:first-child):hover{
  font-weight:bold;
  cursor:default;
  background-color:#B80D9F;
  color:white;
}
 .schedule tr:not(:first-child):hover a{
  color:white;
  text-decoration:none;
 }
.schedule tr:not(:first-child) a{
 text-decoration:none;
 color:black;
 }
.schedule{
 border-spacing:0px;
}

Answer 4

将您的CSS更改为：

.schedule tr:not(:first-child):hover{
   font-weight:bold;
   cursor:default;
   background-color:#B80D9F;
   color:white;
}

.schedule{
   border-spacing:0px;
}

您遇到的问题是:hover之前的空格

Answer 5

错误在于空间

.schedule tr:not(:first-child):hover{
    font-weight:bold;
    cursor:default;
    background-color:#B80D9F;
    color:white;
}

.schedule{
    border-spacing:0px;
}