h88p

Берите любой

document.querySelectorAll('.main-menu__item').forEach(w => {
	w.addEventListener('mouseenter', () => {
		console.log(`Вы навелись на пункт меню "${w.innerText}"`)
	})
})

Разные варианты
1 2

document.querySelector('#test').innerHTML += arr.map(n => `
  <tr>
    <td class="${n.name.firstName}">${n.name.firstName}</td>
    <td class="${n.name.lastName}">${n.name.lastName}</td>
    <td class="${n.about}">${n.about}</td>
    <td class="${n.eyeColor}">${n.eyeColor} ${"<div id = 'eyeColor'; style = 'width: 20px; height: 20px; border-radius: 50%; background-color: red; margin: 0 auto;'>"}</td>
  </tr>
`).join('');

Можете попробовать по циклу с задержкой им задавать цвет и поставить для каждого transition, должен получиться эффект, который вам нужен

setInterval(_=>{
   icons.forEach(function(element, i){
      setTimeout(function(){
         element.style.color = 'white'
         setTimeout(_=>{
              element.style.color = 'green'
          }, 400)
      }, 240 * ++i)
   });
}, icons.length*200 + 800)

Примерно так или как ответил человек в комментариях :)

https://codepen.io/NKroe/pen/mYbYMj

htmlbook.ru/css/text-overflow