JSFiddle - React, Tailwind, and code Playground

HTML

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Clients</a>
        <a href="#">Contact</a>

CSS

div{
    width: 200px;
    height: 20px;
    background: green;
    border: 1px solid #000;
    margin: 5px;
}

JavaScript

var elm = document.getElementsByTagName('a');

    function highlight() {
        alert(this.text)
    }

    function unhighlight() {
        this.style.backgroundColor = "green";
    }

    function init() {
        for (var i = 0; i < elm.length; i++) {
            if (window.addEventListener) {
                elm[i].addEventListener('mouseover', highlight, false);
                elm[i].addEventListener('mouseout', unhighlight, false);
            } else if (window.attachEvent) { 
                elm[i].attachEvent('onmouseover', highlight);
                elm[i].attachEvent('onmouseout', unhighlight);
            }
        }
    }

        if (window.addEventListener) { //when document is loaded initiate init
            document.addEventListener("DOMContentLoaded", init, false);
        } else if (window.attachEvent) {
            document.attachEvent("onDOMContentLoaded", init);
        }