悬停时调整CSS文本大小会导致同级元素移动

是因为在CSS中，当文本大小发生变化时，其所占据的空间也会相应地改变。这会导致其他同级元素的位置发生偏移。

为了解决这个问题，可以使用以下方法之一：

1. 使用CSS的transform属性：可以使用transform属性对文本进行缩放，而不改变其所占据的空间。例如，可以使用transform: scale(1.2)将文本放大1.2倍，而不会影响其他元素的位置。
2. 使用CSS的伪元素：可以使用伪元素来包裹文本，并对伪元素进行缩放。这样，文本的大小变化不会影响其他元素的位置。例如，可以使用以下CSS代码：

.hover-text {
  position: relative;
}

.hover-text::before {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1);
  transition: transform 0.3s ease-in-out;
}

.hover-text:hover::before {
  transform: scale(1.2);
}

在HTML中，使用data-text属性来存储文本内容，并将其赋值给伪元素的content属性。然后，在悬停时，通过改变伪元素的transform属性来实现文本的大小变化，而不会影响其他元素的位置。

1. 使用JavaScript：可以使用JavaScript来监听鼠标悬停事件，并动态改变文本的大小，而不影响其他元素的位置。例如，可以使用以下JavaScript代码：

const hoverText = document.querySelector('.hover-text');

hoverText.addEventListener('mouseover', function() {
  this.style.fontSize = '20px';
});

hoverText.addEventListener('mouseout', function() {
  this.style.fontSize = '16px';
});

在HTML中，给文本元素添加一个类名（例如.hover-text），然后使用JavaScript来监听鼠标悬停事件，并在事件触发时改变文本的大小。

以上是解决悬停时调整CSS文本大小导致同级元素移动的几种方法。根据具体的需求和场景，选择适合的方法来实现效果。