Modifying jQuery sliding underline in navigation

Question

I have the following sliding underline element under my navigation. The idea is that when a link is hovered, the underline slides over to that element. See codepen: https://codepen.io/lucasengnz/pen/eQaQxy

The issue I have is that when the nav is not being used I want the underline to slide back to the first link. I have no clue on how to do this, as I am quite new to using javascript and jQuery . Any pointers?

 $(".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> 

Thanks for any help

Answer 1

You can do it like this:

    $(".underline-nav").css("width", $("#one").width());
    $(".underline-nav").css("margin-left", $("#one").css("margin-left"));
    var unav = $(".underline-nav");
    $('nav a').mouseover(function(){
        var position = $(this).position();
        unav.css({
          "width": $(this).width(),
          "margin-left": $(this).css("margin-left"),
          "left": position.left
        });
    })
    $('nav').mouseleave(function() {
      var firstChild = $(this).find('a:first-child');
      var position = firstChild.position();
        unav.css({
          "width": firstChild.width(),
          "margin-left": firstChild.css("margin-left"),
          "left": position.left
        });
    })

Answer 2

.hover Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.

So you can underline the first element when mouse pointer leaves the element.

 $(".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); }, function () { // on leave , revert to first $(".underline-nav").css("width", $("#one").width()); $(".underline-nav").css("margin-left", $("#one").css("margin-left")); $(".underline-nav").css("left", $("#one").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>