JSFiddle - React, Tailwind, and code Playground

HTML

<div>
            <div id="nav">
                <ul>
                    <li class="active"><a href="#">Home</a></li>
                    <li class="second"><a href="#">About</a></li>
                    <li class="third"><a href="#">Contact</a></li>
                  </ul>
        </div>

CSS

li
{
    background-image: none;
    padding: 50px;
    
}

JavaScript

$(document).ready(function () {
        $("#nav li a").hover(function (){
            var $linkParent = $(this).parent('li');
            if($linkParent.hasClass('active')){
              $linkParent.css('background-image', 'url(http://www.charlottecentercity.org/wp-content/uploads/2013/11/Santa.jpg)');
            }
            else if($linkParent.hasClass('second')){
              $linkParent.css('background-color', '#000000');
            }
            else if($linkParent.hasClass('third')){
              $linkParent.css('background-color', '#929292');
            }
        }, function(){
           var $linkParent = $(this).parent('li');
            $linkParent.css('background-image', 'none');
        });
});