JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<div id="zones">
    <ul class='menu'>
        <li>home</li>
        <li>Contact</li>
    </ul>
</div>

CSS

.menu li, .menu li span {
    height: 27px;
    width: 60px;
}
.menu li {
    position: relative;
    text-align: center;
    vertical-align: center;
    list-style: none;
    cursor: pointer;
}
.menu li span {
    background-image: url(http://www.frooweb.com/wp-content/uploads/2009/01/free-psd-gradient-buttons-post.jpg);
    background-repeat: no-repeat;
    background-position: -205px -112px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: -1;
}

li {
    display: inline-block;
}

JavaScript

$('.menu li').mouseenter(function() {
    $(this).find('span').fadeOut(100, function() {
        $(this).css('background-position', '-204px -175px');
        $(this).fadeIn();
    });
});
$('.menu li').mouseleave(function() {
    $(this).find('span').fadeOut(100, function() {
        $(this).css('background-position', '-204px -112px');
        $(this).fadeIn();
    });
});

$(function() {
    $('.menu li').each(function(index, el) {
        $(this).append('<span></span>');
    });
});