如何实现鼠标悬停放大字体且不挤压其他DOM元素？

直接修改font-size会改变元素的盒模型尺寸，触发Grid布局重计算，导致其他元素晃动。用transform: scale()可以实现视觉上的字体放大，且不会改变元素在文档流中的占位大小，完美解决这个问题。

修改后的代码示例 #

CSS

.links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  padding: 0 20px;
}

li {
  border: 3px solid red;
  padding: 20px;
  list-style-type: none;
  white-space: nowrap;
  font-size: 1rem;
  /* 添加过渡让缩放更平滑 */
  transition: transform 0.2s ease;
}

li:hover {
  /* 缩放1.1倍，对应原需求的10%放大 */
  transform: scale(1.1);
  /* 可选：设置缩放原点，默认是元素中心 */
  /* transform-origin: left center; */
}

HTML

<ul class="links">
  <li><a href='csc'>1</a></li>
  <li><a href='csc'>2</a></li>
  <li><a href='csc'>3</a></li>
  <li><a href='csc'>4</a></li>
  <li><a href='csc'>5</a></li>
  <li><a href='csc'>6</a></li>
</ul>

补充说明 #

• transform: scale()是在元素的渲染层进行缩放，不会影响文档流中的布局，所以其他Grid元素不会被挤压。
• 加上transition属性可以让缩放过程更平滑，提升交互体验。
• 如果需要更精准控制缩放的位置，可通过transform-origin设置原点（比如left center让字体从左侧开始放大）。

内容的提问来源于stack exchange，提问作者Yusuf