JSFiddle - React, Tailwind, and code Playground

HTML

blue link is hovered, box to the right changes to black </br> and all other boxes become red. It then reverts to originaly selected on mouseout</br></br>

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li class="select"></li>
        <li><a href="#">Services</a></li>
        <li class="noselect"></li>
        <li><a href="#">Gallery</a></li>
        <li class="noselect"></li>

    </ul>
</nav>

CSS

a:link, a:visited, a:hover, a:active{text-decoration:none;color:#000;}
nav ul{list-style:none;}
nav ul li {float:left; margin:5px;}
nav ul li a{background:#0099ff; padding:5px 10px;}

.select{width:10px; height:20px; background:#000;}
.noselect{width:10px; height:20px; background:#ff0000;}

JavaScript

$('a').on('hover', function(){
   var $parent = $(this).parent('li');
    
    $parent.siblings('li.select').removeClass('select').addClass('noselect');
    $parent.next('li').removeClass('noselect').addClass('select');
});