html - 使用 bootstrap 3 获得悬停效果

Question

大家好，我正在尝试通过以下链接在我的导航栏上使用下划线 - 中间出效果:Here

我正在使用 bootstrap 3，但我似乎根本无法获得启动的效果；当用户将鼠标悬停在导航栏上时，它会显示新行等，但不会从中间向外显示。我尝试了不同的方法，但似乎根本不起作用。

HTML:

<nav class="navbar navbar-default navbar-fixed-top" id="section1">
    <div class="container">
        <div class="navbar-header">
            <button class="navbar-toggle" data-target="#myNavbar" data-toggle="collapse" type="button">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand"><img alt="" src="Images/logo.png" class="img-responsive"></a>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <a href="#section1">Home</a>
                </li>
                <li>
                    <a href="#section2">About Me</a>
                </li>
                <li>
                    <a href="#section3">Games</a>
                </li>
                <li>
                    <a href="#section4">Mine</a>
                </li>
                <li>
                    <a href="#section5">Hobbies</a>
                </li>
                <li>
                    <a href="#section6">Contact Me</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

CSS:

.navbar-default .navbar-nav>li>a:hover, 
.navbar-default .navbar-nav>li>a:focus {
    color: #fff;
    background-color: rgba(255, 198, 0, 0);
    border-bottom: solid #FFC600;
    -webkit-transition: background-color 200ms linear;
    -moz-transition: background-color 200ms linear;
    -o-transition: background-color 200ms linear;
    -ms-transition: background-color 200ms linear;
    transition: background-color 200ms linear;
}

.navbar-default .navbar-nav>.active>a, 
.navbar-default .navbar-nav>.active>a:focus,
.navbar-default .navbar-nav>.active>a:hover {
    color: #fff;
    background-color: rgba(255, 198, 0, 0);
    border-bottom: solid #FFC600;
}

Fiddle link here

我只是想让“下划线 - 中间出”的效果在那个网站上工作，但对于我来说，我似乎无法在 Bootstrap 上做到这一点。任何帮助都会很棒，谢谢。

Answer 1

您没有正确复制代码。你错过了一些造型。 我已经更新了你的 fiddle

您错过了这些样式，我添加了 margin-top 以使其在您的布局上看起来不错

.navbar-default .navbar-nav>li>a:after {
  content: '';
  display: block;
  margin: auto;
  height: 3px;
  width: 0px;
  background: transparent;
  transition: width .5s ease, background-color .5s ease;
  margin-top: 10px;
}
.navbar-default .navbar-nav>li>a:hover:after {
  width: 100%;
  background: yellow;
}