在JQuery

Question

我想将hr元素用作导航栏的下划线，但是使用jquery移动hr的位置时遇到了麻烦。当我在下面将其固定时，它似乎固定在网页的顶部，因此我可以将鼠标悬停在不同的链接上，并且hr元素将滑到该链接上。有什么想法吗？

html：

    $('#tt').hover(function(){
        console.log("hi");
      $('hr').css("margin-left: 50%");
    
    })

    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;
    }
    
    
    hr {
      height: .25rem;
      width: 9.5%;
      margin: 0;
      margin-left: 1.3vw;
      background: tomato;
      border: none;
      transition: .3s ease-in-out;
      top: 6vh;
    }
    
    a:hover ~ hr{
      margin-left: 20px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
            <nav>
              <a id="one" href="#">name</a>
              <div class="floatright">
                <a id="tt" href="#">Link One</a>
                <a href="#">Link Two</a>
                <a href="#">Link Three</a>
                <a href="#">Link Four</a>
                </div>
                <hr />
    
              </nav>
</div>

codepen： https://codepen.io/anon/pen/GwzYje

Answer 1

您可以使用简单的CSS来做到这一点。只需删除您的hr标签，相关的CSS并添加此CSS

nav a:hover {
   text-decoration:underline;
} 

https://codepen.io/anon/pen/rQPqmw

如果您真的想使用jquery做到这一点，可以这样做：在这里，hover方法对mouseenter和mouseleaves事件都使用两种方法。

$('nav a').hover(function() {
    $(this).css("text-decoration", "underline");
}, function() {
   $(this).css("text-decoration", "none");
})

https://codepen.io/anon/pen/PxVydw

Answer 2

如萨拉赫丁（Mal。Salahuddin）先生所提到的，最简单的方法是在元素上添加一些:hover样式，无论是下划线还是边框，具体取决于所需的行位置。 Saladahuddin博士提供了通过CSS样式表和jquery下划线的示例。

我个人更喜欢使用border-bottom，因为它可以让您确定颜色和粗细，以及使用padding-bottom来确定行距文本的距离。我添加了白色边框（或背景为任何颜色），以使其他元素不会被悬停。

nav a {
    border-bottom: 3px white solid;
}

nav a:hover {
   border-bottom: 3px tomato solid;  
} 

---

或者，如果您希望动画在屏幕上移动，那么这是使用jquery和div（而不是hr）的解决方案。这在全屏模式下效果最好，您需要为较小的屏幕添加响应检查（即在手机上使用sidenav或类似功能）。

$(".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: red;
  height: .25rem;
  position: absolute;
  top: 1.65em;
  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;
}

a:hover ~ hr{
  margin-left: 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container">
        <nav>
          <a id="one" href="#">name</a>
          <div class="floatright">
            <a id="tt" href="#">Link One</a>
            <a href="#">Link Two</a>
            <a href="#">Link Three</a>
            <a href="#">Link Four</a>
            </div>
            
            <div class="underline-nav">
            </div>

          </nav>
        </div>