原创 石小石Orz 2025-02-24 08:30 重庆
点击关注公众号，“技术干货”及时达！
点击关注公众号，“技术干货” 及时达！
背景简介
大家好，我是石小石！最近开发中遇到这样一个需求：
❝hover 卡片后，「边框由原来的 1px 变成 2px」，且颜色由灰色变为蓝色。
❞
hover 改变样式，这太 easy 了！
.work-order-card {
padding: 8px 16px 16px 16px;
border-radius: 8px;
border: 1px solid #e1e5eb;
width: 296px;
transition: all 0.2s ease;
&:hover {
border: 2px solid #64A6F7;
transition: all 0.2s ease;
}
}
但实际做完后，我们会发现一个问题，样式不够丝滑：
❝「hover 后元素的内边距发生变化，中间区域尺寸被挤压，从而导致过渡动画很生硬！」
❞
这个问题在前端开发中应该比较常见，我就简单分享一下自己的解决方案吧。
如何解决
要想解决这个问题，本质就是让 「hover 前后，中间核心区域的位置不随边框、边距的变化而变化」。
场景一：边框从无到有
最简单的场景，就是一开始没有边框，后来有边框。
这种最容易处理，我们只需要给盒子设置和 hover 后同样粗细的边框，颜色设置「透明」即可。
.work-order-card {
padding: 8px 16px 16px 16px;
border-radius: 8px;
border: 2px solid transparent;
width: 296px;
transition: all 0.2s ease;
&:hover {
border: 2px solid #64A6F7;
transition: all 0.2s ease;
}
}
场景二：边框粗细发生变化
比较麻烦的场景，如文章一开始说的场景，「hover 后，边框从 1px 变成 2px」。这种情况，hover 盒子的 padding 一定会变化（注意大盒子尺寸是固定的），必然会导致内部元素被挤压，位置改变。
动态 padding
当然，聪明的你可能计算 hover 后的 padding
.work-order-card {
padding: 8px 16px 16px 16px;
border-radius: 8px;
border: 1px solid #E1E5EB;
width: 296px;
&:hover {
padding: 7px 15px 15px 15px;
border: 2px solid #64A6F7;
}
}
不加「过渡动画」时，看着挺不错
但加上 transition 过渡效果，那就原形毕露！
.work-order-card {
padding: 8px 16px 16px 16px;
border-radius: 8px;
border: 1px solid #E1E5EB;
width: 296px;
transition: all 0.2s ease;
&:hover {
padding: 7px 15px 15px 15px;
border: 2px solid #64A6F7;
transition: all 0.2s ease;
}
}
不设置 padding，居中核心内容
如果盒子的尺寸都能确定，最好的方式，还是使用 「flex 布局」，让中间的核心区域（下图红色部分）永远居中！这样，无论边框怎么变，中间的位置永远不变，自然就解决了元素被挤压的问题！
<div class="work-order-card">
<div class="center-box">
<!-- 子元素 -->
</div>
</div>
.work-order-card {
border-radius: 8px;
border: 1px solid #E1E5EB;
width: 296px;
height: 214px;
transition: all 0.2s ease;
&:hover {
border: 2px solid #64A6F7;
transition: all 0.2s ease;
}
.center-box{
width: 264px;
}
}
❝注意：这种实现方式，要求最外层的盒子宽高是固定的，内部盒子宽度也需要固定。
❞
总结
针对 hover 某个元素，其边框变粗导致内部元素被挤压的问题，这篇文章提供了三个解决方案：
边框从无到有，改变原始边框透明度即可
边框 hover 尺寸变化：
如果不要求过渡效果，hover 后可以计算 padding
如果需要过渡效果，使用 felx 布局居中核心区域即可
如果大家有更好的方案，可以评论区分享一下。
点击关注公众号，“技术干货” 及时达！
