JSFiddle - React, Tailwind, and code Playground

by gromer

HTML

<ul class="nav">
            <li class="nav1" id="current"><a href="#">Images</a></li>
            <li><span>.</span></li>
            <li class="nav2"><a href="#">Articles</a></li>
            <li><span>.</span></li>
            <li class="nav3"><a href="#">Links</a></li>
            <li><span>.</span></li>
            <li class="nav4"><a href="#">Contact</a></li>
        </ul>

        <ul class="navx">
            <li class="nav1x" id="current"><a href="#">Images</a></li>
            <li><span>.</span></li>
            <li class="nav2x"><a href="#">Articles</a></li>
            <li><span>.</span></li>
            <li class="nav3x"><a href="#">Links</a></li>
            <li><span>.</span></li>
            <li class="nav4x"><a href="#">Contact</a></li>
        </ul>

CSS

.nav li{ display: inline;}
    .nav li span, .nav li a{   
        font-size: 24px; 
        text-decoration:  none;
        color:black; 
    }
    .navx li{   
         display: inline;
    }
    .navx li span, .navx li a{        
        font-size: 24px; 
        text-decoration: none;
        color:blue;
    visibility:hidden;
    }
    .navx .nav1x a{
        visibility:visible;
    }
    .navx .nav2, .navx .nav3, .navx .nav4 a{
        visibility:hidden;
    }

JavaScript

$(function() {
    $('.nav1, .nav1x').not('#current').hover(
        function () {
            $(".nav1x a").css("visibility","visible");
          }, 
          function () {
            $(".nav1x a").css("visibility","hidden");
          }
    );
    $(".nav2, .nav2x").not('#current').hover(
        function () {
            $(".nav2x a").css("visibility","visible");
          }, 
          function () {
            $(".nav2x a").css("visibility","hidden");
          }
    );
    $(".nav3, .nav3x").not('#current').hover(
        function () {
            $(".nav3x a").css("visibility","visible");
          }, 
          function () {
            $(".nav3x a").css("visibility","hidden");
          }
    );
    $(".nav4, .nav4x").not('#current').hover(
        function () {
            $(".nav4x a").css("visibility","visible");
          }, 
          function () {
            $(".nav4x a").css("visibility","hidden");
          }
      );
});