JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li style="background-position: 0px;"></li>
    <li style="background-position: 0px;"></li>
    <li style="background-position: 0px;"></li>
    <li style="background-position: 0px;"></li>
</ul>

CSS

li {
    width: 30px;
    height: 30px;
    float: left;
    background: red;
    border: 2px solid black;
    background-image:      url(http://u.jimdo.com/www52/o/s2ba029df7f23bf1c/userlayout/img/arrows.png)
}

ul {
    list-style: none;
}

JavaScript

var elems = document.getElementsByTagName('li');

var t1= null, t2 = null;

function setOver(el) {
    el.onmouseover = function(e) {
        if (t2 != null) {
            clearInterval(t2);
            t2 = null;
        }
        var target = e.target || e.srcElement;
        //var j = 0;
        var j = parseInt(el.style.backgroundPosition);
        t1 = setInterval(function(){
                if (j == -30) {
                    clearInterval(t1);
                    t1 = null;
                }
                j-=1;
                el.style.backgroundPosition = j +'px';
            }, 7);
    }
}

function setOut(el) {
    el.onmouseout = function(e) {
        var target = e.target || e.srcElement;
        if (t1 != null) {
            clearInterval(t1);
            t1 = null;
        }
        //var j = -30;
        var j = parseInt(el.style.backgroundPosition);
        t2 = setInterval(function(){
                if (j == 0) {
                    clearInterval(t2);
                    t2 = null;
                }
                j+=1;
                el.style.backgroundPosition = j +'px';
            }, 7);
    }
}

for(i=0; i < elems.length; ++i) {
    setOver(elems[i]);
    setOut(elems[i]);
}