JSFiddle - React, Tailwind, and code Playground

HTML

<a class="menu_item" href="#">first</a>
<a class="menu_item" href="#">second</a>
<a class="menu_item" href="#">third</a>

CSS

.active {
    color: red;
}

JavaScript

var links = [].slice.call(document.querySelectorAll('.menu_item'));

function hover(e) {
   var pre = this.previousElementSibling;
    method =  e.type === 'mouseenter' ? 'add' : 'remove'; 
   if (pre) {
       pre.classList[method]('active'); 
   }
}
links.forEach(function(el) {
    el.addEventListener('mouseenter', hover);
    el.addEventListener('mouseleave', hover);
});