JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navbar-item-set">
        
        <div class="navbar-item" id="navbar-item-ID2Games">
            
            <a href="index.html" >
                
                <div class="navbar-image" id="navbar-image-unhovered">
                </div>
                <div class="navbar-image" id="navbar-image-id2games">
                </div>
                
                <br>
                <div class="navbar-text">
                    ID2 Games
                </div>
            </a>
            
        </div>
    
        <div class="navbar-item" id="navbar-item-FH">
            
            <a href="F+H.html">
                
                <div class="navbar-image" id="navbar-image-FH-unhovered">
                </div>
                <div class="navbar-image" id="navbar-image-FH">
                </div>
                
                <br>
                
                <div class="navbar-text">
                    Fizz + Hummer
                </div>
            </a>
            
        </div>
        
        <div class="navbar-item" id="navbar-item-HDS">
            
            <a href="HDS.html">
                
                <div class="navbar-image" id="navbar-image-HDS-unhovered">
                </div>
                <div class="navbar-image" id="navbar-image-HDS">
                </div>
                
                <br>
                
                <div class="navbar-text">
                    Human Delivery Service
                </div>
                
            </a>
            
        </div>
        
        <div class="navbar-item" id="navbar-item-contact">
            
            <a href="contact.html" >
                
                <div class="navbar-image" id="navbar-image-contact-unhovered">
                </div>
                <div class="navbar-image" id="navbar-image-contact">
                </div>
                
                <br>
                
                <div class="navbar-text">
 ...

JavaScript

if (window.location.href.match(/F+H\.html/)){
                    $('#navbar-image-FH').show();
                    
                    $('#navbar-image-unhovered').hide();
                    $('#navbar-image-id2games').hide();
                    $('#navbar-image-HDS').hide();
                    $('#navbar-image-HDS-unhovered').hide();
                    $('#navbar-image-contact').hide();
                    $('#navbar-image-contact-unhovered').hide();
                    
                    //
                    $('#navbar-item-id2games').hover(function() {
                      $('#navbar-image-id2games').toggle();
                      $('#navbar-image-FH-unhovered').hide();
                    }, function(){
                             $('#navbar-image-unhovered').toggle();
                             $('#navbar-image-id2games').hide();
                        });
                
                    $('#navbar-item-HDS').hover(function() {
                          $('#navbar-image-HDS').toggle();
                          $('#navbar-image-HDS-unhovered').hide();
                        }, function(){
                                 $('#navbar-image-HDS-unhovered').toggle();
                                 $('#navbar-image-HDS').hide();
                            });
    
                    $('#navbar-item-contact').hover(function() {
                          $('#navbar-image-contact').toggle();
                          $('#navbar-image-contact-unhovered').hide();
                        }, function(){
                                 $('#navbar-image-contact-unhovered').toggle();
                                 $('#navbar-image-contact').hide();
                            });
                }