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

Question

当我将鼠标悬停在其中一个标题上时，我希望该单元格的边框底部为红色。 不幸的是，对我来说它在代码片段中工作，所以我还包含了我的问题的屏幕截图。 当我将鼠标悬停在标题“Followers”上时，整行的边框底部变为红色，但是当我将鼠标悬停在标题“Following”上时，仅该单元格的边框底部变为红色。 我不确定为什么会这样，更令人困惑的是它在代码段中按预期工作。 有任何想法吗？

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

Answer 1

尝试设置默认轮廓颜色。

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