Question

希望在链接上创建效果，边框底部会在悬停时动画效果。在stackoverflow上找到了一个jfiddle，但效果与预期略有不同。

动画有效但不是流畅的动画。此外，border-bottom看起来比链接本身更宽，而不是仅仅强调文本。

我的代码中遗漏了什么？

NavBar链接HTML：

<div class="collapse navbar-collapse" id="main-navbar">
    <ul class="nav navbar-nav navbar-right">
         <li><a href="about.html">ABOUT</a></li>
         <li><a href="work.html">WORK</a></li>
         <li><a href="services.html">SERVICES</a></li>
         <li><a href="contact.php">CONTACT</a></li>
    </ul>
</div>

CSS：

#main-navbar ul li a,
#main-navbar ul li a:visited {
    color: white;
    display: inline-block;
    padding-bottom: 3px;
    margin-right: 10px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

#main-navbar ul li a:hover {
    display: inline-block;
    width: 100%;
    border-bottom: #16b2d9 3px solid;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

Answer 1

这样的东西？

＆＃13;

#main-navbar ul li a,
#main-navbar ul li a:visited {
  color: white;
  display: inline-block;
  padding-bottom: 3px;
  margin-right: 10px;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
  text-decoration: none;
  border-bottom: transparent 1px solid;
  margin-bottom: 1px;
  line-height:10px;
}
#main-navbar ul li a:hover {
  border-bottom: #16b2d9 1px solid;
  -webkit-transition: 0.4s ease;
  transition: 0.4s ease;
}


body {
  background: black;  /* for testing purpose */
}

＆＃13;

<div class="collapse navbar-collapse" id="main-navbar">
  <ul class="nav navbar-nav navbar-right">
    <li><a href="about.html">ABOUT</a>
    </li>
    <li><a href="work.html">WORK</a>
    </li>
    <li><a href="services.html">SERVICES</a>
    </li>
    <li><a href="http://blog.jasonscott.me.uk">BLOG</a>
    </li>
    <li><a href="contact.php">CONTACT</a>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

试试这个

#main-navbar ul li a,
#main-navbar ul li a:visited {
    color: black;
    display: inline-block;
    padding-bottom: 3px;

    margin-right: 10px;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

#main-navbar ul li a:hover {
    display: inline-block;
    width: inherit;
    border-bottom: #16b2d9 3px solid;
    -webkit-transition: 0.4s ease;
    transition: 0.4s ease;
}

CSS动画下划线

2 个答案: