在悬停选择器期间移动其他元素的问题

Question

我想用悬停选择器解决我的问题。我有一个包含 3 列的经典内容（来自 font awesome、h2 和 p 的图标）。

我想在将鼠标悬停在该图标上时使它变大，但是当我这样做时，其他元素会随着图标变大而向下移动。

<div class="container">
        <div class="row d-flex justify-content-center align-items-center text-center">
            <div class="col-4">
                <i class="fas fa-desktop pb-5"></i>
                <h2>Fully Responsive</h2>
                <p class="lead">This theme will look great on any device, no matter the size!</p>
            </div>
            <div class="col-4">
                <i class="fas fa-layer-group pb-5"></i>
                <h2>Bootstrap 4 Ready</h2>
                <p class="lead">Featuring the latest build of the new Bootstrap 4 framework!</p>
            </div>
            <div class="col-4">
                <i class="far fa-check-circle pb-5"></i>
                <h2>Easy to use</h2>
                <p class="lead">Ready to use with your own content, or customize the source files!</p>
            </div>
        </div>
    </div>

Answer 1

您可以增大 i 标签的高度，这样当您将鼠标悬停并更改图标的字体大小时（只要它保持在高度范围内），任何东西都不会移动。

在悬停选择器期间移动其他元素的问题

Problem with moving other elements during hover selector

css

hover

selector