悬停a标签时相邻元素被挤开的CSS样式问题咨询

超链接悬停时挤压其他元素的核心是盒模型尺寸动态变化：你仅在a:hover状态下设置了padding: 1rem，默认状态的a标签没有内边距，鼠标悬停时元素突然被撑大，flex布局下的相邻元素自然会被新增的尺寸挤压偏移。

最稳妥的解决方式是提前固定a标签的尺寸，避免悬停时产生尺寸变化：

• 将hover状态的padding移到默认的a标签规则中，默认状态下背景透明，悬停时仅修改背景色即可，元素尺寸全程保持一致，不会挤压相邻元素。
• 可额外添加过渡属性让悬停效果更顺滑。

修正后代码如下：

.main-nav ul{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.main-nav ul li{
    list-style: none;
    /* 原li的1.2rem padding可移除或调小，避免和a的padding重复撑大空间 */
    padding: 0.2rem;
}
.main-nav ul li a{
    color: #fff;
    text-decoration: none;
    /* 默认就添加和hover规则一致的padding，固定元素尺寸 */
    padding: 1rem;
    /* 可选：添加背景色过渡效果 */
    transition: background 0.2s linear;
}
.main-nav ul li a:hover{
    color: #fff;
    background: #97cb52;
    /* 无需再重复设置padding */
}

如果你不想给默认状态的a标签添加可见内边距，也可以选择给hover状态的a添加负margin抵消padding带来的尺寸变化：

.main-nav ul li a:hover{
    color: #fff;
    background: #97cb52;
    padding: 1rem;
    /* 负margin抵消padding的尺寸影响 */
    margin: -1rem;
}

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