Recently, I implemented a sliding underline element in my navigation bar. The idea is that when a link is hovered over, the underline smoothly transitions to that element. You can take a look at the codepen example here: https://codepen.io/lucasengnz/pen/eQaQxy
However, I'm facing an issue where I want the underline to slide back to the first link when the navigation isn't being used. As someone who is new to utilizing javascript and jQuery, I am unsure how to tackle this problem. Any advice or pointers would be greatly appreciated.
$(".underline-nav").css("width", $("#one").width());
$(".underline-nav").css("margin-left", $("#one").css("margin-left"));
$('nav a').hover(function() {
$(".underline-nav").css("width", $(this).width());
$(".underline-nav").css("margin-left", $(this).css("margin-left"));
var position = $(this).position();
$(".underline-nav").css("left", position.left);
}).underline-nav {
background: tomato;
height: .25rem;
position: absolute;
top: 1.8em;
transition: all ease 0.3s;
}
nav {
font-size: 1.85em;
}
nav a {
text-decoration: none;
color: #000;
float: left;
margin-top: 1vh;
}
#one {
margin-left: 2vw;
}
.floatright {
float: right;
padding-right: 3vw;
}
.floatright a {
margin-left: 4vw;
}<div class="container">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav>
<a id="one" href="#">one</a>
<div class="floatright">
<a id="tt" href="#">two</a>
<a href="#">three</a>
<a href="#">four</a>
<a href="#">five</a>
</div>
<div class="underline-nav">
</div>
</nav>
</div>Thank you for any assistance provided.