javascript - 修改导航中的jQuery滑动下划线

Question

我的导航下有以下滑动下划线元素。这个想法是，当一个链接悬停时，下划线会滑到该元素上。见代码笔: https://codepen.io/lucasengnz/pen/eQaQxy

我遇到的问题是，当未使用导航时，我希望下划线滑回第一个链接。我不知道如何执行此操作，因为我对使用 javascript 和 jQuery 还很陌生。有什么指点吗？

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

感谢您的帮助

Answer 1

你可以这样做:

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