hover后元素边框变粗，样式被挤压？一招帮你解决，快收藏备用！

点击关注公众号，“技术干货” 及时达！

背景简介

大家好，我是石小石！最近开发中遇到这样一个需求：

❝

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 尺寸变化：

1. 如果不要求过渡效果，hover 后可以计算 padding
2. 如果需要过渡效果，使用 felx 布局居中核心区域即可

如果大家有更好的方案，可以评论区分享一下。