JSFiddle - React, Tailwind, and code Playground

HTML

<div class="menu-item">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
</div>
<hr />
<div class="menu-item">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
</div>
<hr />
<div class="menu-item">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
</div>

JavaScript

var menu = document.getElementsByClassName("menu-item");
console.log(menu);

for (var i = 0; i<menu.length; i++)
{

    console.log(menu[i].addEventListener)
    menu[i].addEventListener("mouseover",function () {
        var obj = this;
        setTimeout(function(){
            console.log(obj);
            var a = obj.getElementsByTagName("a");
            for (var j = 0; j < a.length; j++){
                a[j].style.color = "red";
            }          
        },1000)
      })
}