Html 将鼠标悬停在具有边框属性的元素上会被移动

悬停li元素时，我希望在底部和顶部添加边框。代码如下所示：

#overview li:hover {
    background: rgb(31, 31, 31);
    border-top: 1px solid white;
    border-bottom: 1px solid white;
}

（将导航悬停在左侧）

问题是，它将li元素移动1或2个像素。我已经尝试为悬停状态添加一个

边距顶部：-1px

，但这并不能解决问题

---

有什么想法吗？

那是因为你在

li

上加了一个边框。有多种解决方案。一种是将填充减少1个像素，以补偿添加的边框

---

这是因为当您将鼠标悬停在

li

上时，它将添加一个边框。有多种解决方案。一种是将填充减少1个像素，以补偿添加的边框

---

我建议尝试从一开始就添加1px上边距，并在悬停时将上边距设置为0，以补偿1px上边距。

---

您也可以通过更改填充（而不是边距）

我建议尝试从一开始就添加1px的上边距，并在悬停时将上边距设置为0，以补偿1px的上边框。

---

您也可以通过更改填充（而不是边距）来完成此操作。

在不悬停

时添加透明边框（并且只更改
上边框的颜色：悬停
）

（在小提琴上进行动态测试，似乎效果不错）
在不悬停
时添加透明边框（并且只更改
上边框的颜色：悬停
）

（在小提琴上进行动态测试，似乎效果不错）
根据浏览器支持的级别，您可以使用css
框大小调整属性


根据浏览器支持的级别，您可以使用css
box size
property


更新

或者对边框使用相同的背景色

#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}

更新

或者对边框使用相同的背景色

#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}

的确这证实了我的回答确实。。。这证实了我的回答
#overview li {

padding: 5px;     
border-top:solid 1px rgb(24, 53, 82);
border-bottom:solid 1px rgb(24, 53, 82); 

}