在 JQuery 中的 hr 元素上使用悬停功能答案

【问题标题】：Using hover function on hr element in JQuery在 JQuery 中的 hr 元素上使用悬停功能
【发布时间】：2019-05-03 20:09:47
【问题描述】：

我想使用 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>

代码笔： https://codepen.io/anon/pen/GwzYje

【问题讨论】：

你必须使用hr吗？
还有哪些其他选择？
您应该使用.css()，例如.css("margin-left", "50%") 或.css({"margin-left": "50%"})

标签： jquery html css nav underline

【解决方案1】：

正如 Md. Salahuddin 所提到的 - 最简单的方法是为您的元素添加一些 :hover 样式，可以是下划线还是边框，具体取决于您想要线条的位置。 Md. 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>

【讨论】：

【解决方案2】：

您可以使用简单的 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

【讨论】：