Question

我使用以下代码突出显示表行，但它不突出显示该行。

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

我有什么遗失的吗？

HTML和CSS：

＆＃13;

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

＆＃13;

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

＆＃13;

更新

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

为什么字体颜色不会改变？

Answer 1

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

在a上使用自定义样式设置颜色，您必须在a上添加另一个css选择器以更改其颜色：

.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

所有内容都已更新。请参阅工作Link并享受！ :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

错误在于空间

->select('*')

使用CSS突出显示整行

5 个答案: