CSS中div hover添加边框时出现轻微下移问题求助

问题原因 #

你遇到的位移问题，本质是hover时新增的边框会占据额外布局空间——哪怕用了box-sizing: border-box，但初始状态元素没有边框，hover时突然添加边框会让元素总尺寸（内容+内边距+边框）变大，进而导致布局移位。另外注意你的选择器.navbar :hover是带空格的后代选择器，作用的是.navbar内部的元素而非.navbar本身，这可能也是box-sizing没生效的原因。

解决方案 #

给你几个实用的解决办法：

1. 初始状态设置透明边框

在元素初始样式里添加和hover时同宽度的透明边框，hover时只修改边框颜色，让元素尺寸始终保持一致：

.navbar{
    height: 48.48px;
    width: 70px;
    float: right;
    margin: 10px 5.57%;
    color: white;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    /* 新增透明边框，宽度与hover时一致 */
    border: 1.5px transparent solid;
    border-radius: 10px;
}
/* 修改选择器，去掉空格，作用于.navbar本身 */
.navbar:hover{
    border-color: white;
}

2. 使用outline代替border

outline不占据元素的布局空间，不会改变元素尺寸，适合这种hover高亮场景：

.navbar:hover{
    outline: 1.5px white solid;
    outline-radius: 10px;
}

注：部分旧浏览器可能不支持outline-radius，若需兼容，可搭配border-radius使用，outline会自动跟随元素的圆角。

3. 调整内边距抵消边框宽度

如果不想用透明边框或outline，也可以在hover时减少对应宽度的内边距，抵消边框带来的尺寸变化：

.navbar{
    height: 48.48px;
    width: 70px;
    float: right;
    margin: 10px 5.57%;
    color: white;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    padding: 0; /* 初始内边距设为0 */
}
.navbar:hover{
    border: 1.5px white solid;
    border-radius: 10px;
    /* 内边距减去边框宽度，保持内容区域不变 */
    padding: calc(0px - 1.5px);
}

额外提醒 #

如果你的目标是给.navbar本身加hover效果，务必把选择器写成.navbar:hover（无空格）——带空格的.navbar :hover会选中.navbar下的所有子元素，这会导致样式作用对象错误，也是之前box-sizing没生效的关键。

内容的提问来源于stack exchange，提问作者Murphyd1