SO - 22809239

HTML

<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<div class="container">
    <ul>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
    </ul>
    <ul>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
    </ul>
    <ul>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
    </ul>
    <ul>
        <li>lorem</li>
        <li>lorem</li>
        <li>lorem</li>
    </ul>
</div>

CSS

.container {
    width: 500px;
    height: 500px;
   

}
ul, li {
 list-style: none;

}

JavaScript

var col = ['#fff6ea', '#e9f6e3', '#ffffe5', '#f5fdfe',],
    index = 0;







$('ul').hover(function () {
    $('.container').stop(true).animate({
        backgroundColor: col[index++ % col.length]
    });
}, function () {
    $('.container').stop(true).animate({
        backgroundColor: 'none'
    });
});