JSFiddle - React, Tailwind, and code Playground

by helpinspireme

HTML

<nav class="primary">
    <a class="home first <?php if ( $nav == 'home' ) { echo 'active';}?>" href="index.php">Home</a>
    <a class="about <?php if ( $nav == 'about' ) { echo 'active';}?>" href="about.php">About</a>
    <a class="linkedin" href="#">LinkedIn</a>
    <a class="contact" href="#">Contact</a>
    </div>
    <span class="nav-name"></span>
    <div class="cl"></div>
</nav>

CSS

.nav-name { opacity: 0; }

JavaScript

$('.primary a').on('mouseover', function(event) {
		var navText = $(this).html();
		$('.primary .nav-name').html(navText);
		$('.primary .nav-name').stop().animate({"opacity": "1"}, "250");
	});

	$('.primary a').on('mouseleave', function(event) {
		$('.primary .nav-name').stop().animate({"opacity": "0"}, "250");
	});