如何在不移动元素的情况下在悬停时添加 CSS 边框？

在没有元素移动的情况下在悬停时添加 CSS 边框

将突出显示的背景应用于悬停效果上的元素时，添加 CSS 边框可能会导致达到意想不到的结果。额外的 1px 边框加宽了元素，导致其位置发生偏移。我们如何在不诉诸背景图像方法的情况下处理这个问题？

解决方案在于首先在元素上创建一个透明边框：

.jobs .item {
   background: #eee;
   border: 1px solid transparent;
}

这样，边框就存在，但是保持不可见，防止发生任何移动。应用悬停效果时：

.jobs .item:hover {
   background: #e1e1e1;
   border: 1px solid #d0d0d0;
}

突出显示的背景与彩色边框一起应用，但边框不会改变元素的尺寸，因为它已经是透明的。因此，元素的位置在悬停时保持一致。

以上是如何在不移动元素的情况下在悬停时添加 CSS 边框？的详细内容。更多信息请关注PHP中文网其他相关文章！