Как в js выполнить действие над всеми элементами с одним классом?

Всем привет! Подскажите, как делается, чтобы цвет при наведении изменялся у каждой "a" этого класса, а не только у первой(интересует именно через js).

    <a class="test" href="#">link-1</a>
    <a class="test" href="#">link-2</a>
    <a class="test" href="#">link-3</a>

    <script>

        let link = document.querySelector('.test')
        link.addEventListener('mouseover', () => {
            link.style.color = "red"
        })

    </script>

</body>

решение-вот:

    <a class="test" href="#">link-1</a>
    <a class="test" href="#">link-2</a>
    <a class="test" href="#">link-3</a>

    <script>

        let link = document.querySelectorAll('.test')
        for (var i = 0; i < link.length; i++) {
  link[i].onclick = function(){
    alert("ASPAS");
//    что здесь написать, чтобы изменить цвет?
  };
}
 </script>

</body>```


 alert работает. но как мне добавить вместо него изменение цвета?