JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></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');
function setOver(el) {
    el.onmouseover = function(e) {
        var target = e.target || e.srcElement;
        var j = 0;
        //var j = parseInt(el.style.backgroundPosition); //not work
        var t = setInterval(function(){
                if (j == -30) {
                    clearInterval(t);
                }
                j-=1;
                el.style.backgroundPosition = j +'px';
            }, 7);
    }
}

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

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