当我悬停图标使其变大时，我的页面会移动

Question

当我把光标放在图标上时，图标的字体越来越大，所以div变大了，它的移动页面有点大，看起来不酷。如何在不增大div的情况下实现它？我的代码：

<div className="bg-gray-100 ratingWidth tomiddle p-6 rounded-lg text-center">
Aradığınız yanıtı bulabildiniz mi ?
<div className="mt-3  space-x-5 h-full "> //My icon Div
<span className="ti-thumb-up ratingEase "></span> //My icons
<span className="ti-thumb-down ratingEase"></span>
<br />
</div>
</div>

Css:

.ratingWidth {
width: 96%;
height: 100%;
}
.ratingEase {
transition: 0.2s;
font-size: 50px;
}
.ratingEase:hover {
transition: 0.2s;
transition-timing-function: ease;
font-size: 54px;
}

Answer 1

您可以使用absolute定位元素。此属性使您的图标不会更改DOM中的任何其他项。即使移动、变换或对该元素执行任何操作，其他元素也不会移动。

.ratingEase {
transition: 0.2s;
font-size: 50px;
position: absolute;
}