JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu1">MENU 1</div>
<div id="menu2">MENU 2</div>

<div id="image-cover"></div>

<div id="image">
    <img src="http://www.fixxed.com/clancy.jpg" />
</div>

CSS

#image-cover {position: absolute; z-index: 0; background-color:white; width:110px;height:110px}

#image {position: absolute; z-index: -1}

#menu2 {cursor: pointer}

JavaScript

$(function() {
    function swap_hover() {
        if ($("#image").css("z-index") < "0") {
            $("#menu1").hover(function() {
                $(this).css("background-color", "red");
            }, function() {
                $("#menu1").css("background-color", "white");
            });
        }
        else {
            $("#menu1").hover(function() {
                $(this).css("background-color", "blue");
            }, function() {
                $("#menu1").css("background-color", "white");
            });
        }
    }

    swap_hover();

    $("#menu2").click(function() {
        $("#image").css("z-index", "1");
        
        swap_hover();
    });
});