An element with a .scale class name must have been mouse over. Only the front part works properly. What's the problem?

Question

I worked to increase the scale when hovering over an element with scale class. Only the li at the beginning works properly, I'm curious as to why.

cursorActive() {
  const cursor = document.querySelector(".cursor");
  const cursorLink = document.querySelector(".scale");

  cursorLink.addEventListener('mouseover', function () {
    cursor.style.transform = 'scale(3.2)';
  });

  cursorLink.addEventListener('mouseout', function () {
    cursor.style.transform = 'scale(1)';
  });
}

<li class="list scale"><router-link to="/">A</router-link></li>
<li class="list scale"><router-link to="/contact">B</router-link></li>
<li class="list scale"><router-link to="/Experience">C</router-link></li>