我有一个光标元素，它跟随鼠标的x和y位置。但一旦它悬停在菜单的文本元素上，我希望这个光标跟随器的大小和位置发生变化。
大小=悬停文本的偏移宽度和高度位置=保持悬停文本的偏移y和x，并且仅在悬停时。
到目前为止，我有这个，但我相信它不起作用。有没有关于我应该如何继续的建议？谢谢你的好话！

let cursor = document.querySelector('.cursorFollower');

let button = document.querySelector('.superText');
let buttonWidth = button.offsetWidth;
let buttonHeight = button.offsetHeight;
let buttonX = button.offsetLeft;
let buttonY = button.offsetTop;

document.addEventListener('mousemove',(e)=>{
  cursor.style.left = e.pageX - 10 + 'px';
  cursor.style.top = e.pageY - 10 + 'px';   
});

button.onmouseover = function(){
  button.setAttribute("style", "color: #84C4B5;");
  cursor.style.transform = 'rotate(0deg)';
  cursor.style.width = buttonWidth + 'px';
  cursor.style.height = buttonHeight + 'px';
  cursor.style.top = buttonY + 'px';
};

button.onmouseout = function(){
  button.setAttribute("style", "color: white;");
  cursor.style.transform = 'rotate(45deg)';
  cursor.style.width = '20px';
  cursor.style.height = '20px';
};

* {

  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width:100%;
  height: 100vh;
  background-color: #0A193E;
  color: white;
  font-family: sans-serif;
  font-size: 20px;
}

.superText {
  padding: 10px 20px;
  cursor: none;
  transition: all 0.2s ease;
}

.cursorFollower {
  width: 20px;
  height: 20px;
  position: absolute;
  border: 1px solid white;
  transition: all 0.2s ease-out;
  pointer-events: none;
  transform: rotate(45deg);
}

<div class="container">
  <p class="superText">Hello World!</p>
</div>

<div class="cursorFollower"></div>