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

Posted 2023-03-06

【中文标题】悬停时表格标题的边框底部

【英文标题】：Border-bottom of table header on hover

【发布时间】：2021-02-18 14:12:06

【问题描述】：

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

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

【参考方案1】：

尝试设置默认的轮廓颜色。

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

.header-1:hover, .header-2:hover  
  border-bottom: red 3px solid;