Question

我的导航下有以下滑动下划线元素。想法是，当链接悬停时，下划线会滑到该元素上。参见codepen： 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
        });
    })

Answer 2

.hover将一个或两个处理程序绑定到匹配的元素，成为当鼠标指针进入并离开元素时执行。

因此，当鼠标指针离开元素时，您可以在第一个元素下划线。

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

在导航中修改jQuery滑动下划线

2 个答案: