Change the color of an element on mouseenter

i want to make the nav color change every time there’s a mouseenter until it reaches 4 different colors. So far im able to change only the background color of the first nav element, even when usingvquerySelectorAll().

This is the CSS
nav {
z-index: 1;
position: fixed;
width: 52px;
height: 299px;
font-family: 'News Cycle';
font-style: bold;
font-weight:600;
font-size: 20px;
line-height: 33px;
text-align: center;

color: #000000;

}

nav li {
    list-style: none;
    padding-top: 30px;
    padding-right: 10px;
    
}

nav a {
    color: rgba(5, 5, 5);
    text-decoration: none;
}


and this is the javascript i have



const colors = ['red', 'green', 'blue', 'yellow'];
let currentIndex = 0;
const myElement = document.getElementById('info');

myElement.addEventListener('mouseenter', () => {
  myElement.style.color = colors[currentIndex];
  currentIndex = (currentIndex + 1) % colors.length;
});

I want the code to select the text color of ALL the nav elements but only works for backgroundColor for the first nav, if that makes sense