在鼠标进入栏中改变元素的颜色

Question

我想让导航颜色在每次有鼠标进入时改变，直到它达到4种不同的颜色。到目前为止，我只能改变第一个导航元素的背景颜色，即使使用vqueryselectorall()也是如此。

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;
});

我希望代码选择所有nav元素的文本颜色，但只适用于第一个nav的backgroundColor，如果有意义的话

Answer 1

不看你的HTML很难判断。如果您的元素是一个容器div，它包装了前面提到的其他元素，那么您可以尝试将childElements的颜色显式设置为继承。或者在鼠标悬停时，您可以尝试更改每个子元素的颜色。(通过className或标签获取集合-任何适合您的)