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

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");
  }
);



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