JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="///ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css">
<div id="services">
            <h1>Services</h1>
            <ul>
                <li class="menu"><a href="#">menu item1</a></li>
                <li class="menu"><a href="#">menu item2</a></li>
                <li class="menu"><a href="#">menu item3</a></li>
                <li class="menu"><a href="#">menu item4</a></li>
            </ul>
        </div>

CSS

a{
    background: url('http://www.nira-nk.ru/templates/Berrymoor_tmp/images/back.jpg') -416 center no-repeat;
    display: block;
    text-decoration: none;
}

JavaScript

$('a').css({
    backgroundPosition: -416,
    color: green
}).mouseenter(function() {
    $(this).stop().animate({
        backgroundPosition: 0
    }, 500);
    $(this).css(color, 'blue');
}).mouseleave(function() {
    $(this).stop().animate({
        backgroundPosition: -416
    }, 500);
    $(this).css(color, 'red');
});