悬停时表格标题的边框底部

如何解决悬停时表格标题的边框底部

当我将鼠标悬停在标题之一上时，我希望该单元格的边框底部为红色。不幸的是，对我来说，它正在代码段中运行，因此我还提供了我的问题的屏幕截图。当我将鼠标悬停在标题“跟随”上时，整行的边框底部变为红色，但是当我将鼠标悬停在标题“跟随”上时，仅该单元格的边框底部变成了红色。我不知道为什么会这样，而且如片段中所预期的那样工作更令人困惑。有什么想法吗？

.header-1:hover,.header-2:hover  {
            border-bottom: red 3px solid;
            cursor: pointer;
        }


        #list-1:hover,#list-2:hover {
            cursor: pointer;
            background-color: rgb(238,230,230);
        }

<table class="table table-bordered">
        <tr>
            <td colspan="2">return to profile</td>
        </tr>
        <tr>
            <th class="header-1">Followers</th>
            <th class="header-2">Following</th>
        </tr>
        <tr>
            <td colspan="2" id="list-1">
                <div class="d-flex w-100 justify-content-between">
                  <h5 class="mb-1">List group item heading</h5>
                  <small>3 days ago</small>
                </div>
                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                <small>Donec id elit non mi porta.</small>
            </td>
        </tr>
        <tr>
            <td colspan="2" id="list-2">
                <div class="d-flex w-100 justify-content-between">
                    <h5 class="mb-1">List group item heading</h5>
                    <small class="text-muted">3 days ago</small>
                </div>
                <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
                <small class="text-muted">Donec id elit non mi porta.</small>
            </td>   
        </tr>
    </table>

解决方法

尝试设置默认轮廓颜色。

.header-1,.header-2  {
  border-bottom: white 3px solid;
  cursor: pointer;
}
.header-1:hover,.header-2:hover  {
  border-bottom: red 3px solid;
}