JSFiddle - React, Tailwind, and code Playground

HTML

<img class="navButton" id="topArrow" src="images/arrows/top.png" />
<img class="navButton" id="rightArrow" src="images/arrows/right.png" />

CSS

.navButton { border: none;}
.active { border: 1px solid red;}

JavaScript

document.body.addEventListener('mouseover',function(e)
{
    e = e || window.event;
    var target = e.target || e.srcElement,
    oldSrc = target.getAttribute('src');
    if (target.tagName.toLowerCase() === 'img' && /\bnavButton\b/.test(target.className))
    {
        target.className += ' active';
        target.setAttribute('src','images/arrows/top_o.png');
        target.onmouseout = function()
        {
            target.onmouseout = null;
            target.setAttribute('src',oldSrc);
            target.className = target.className.replace(/\bactive\b/g,'').trim();
        };
    }
},false);