Html 使用bootstrap 3获得悬停效果

大家好，我正试图通过以下链接在导航栏上获得下划线-中间效果：

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

HTML:

---

我只是想从那个网站上获得“下划线–中间偏出”的效果，但就我的一生而言，我似乎无法在bootstrap上做到这一点。任何帮助都会很好，谢谢

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

你错过了这些样式，我添加了页边空白顶部，使它在你的布局上看起来很漂亮

.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;
}

---

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

你错过了这些样式，我添加了页边空白顶部，使它在你的布局上看起来很漂亮

.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;
}

---

只需添加使用：after伪元素创建的三角形的样式，以及链接上的：hover的样式，然后应用于该三角形

    .navbar-default .navbar-nav>li>a {
      color: white;
      font-size: 15px;
      line-height: 1px;
      -webkit-transition: all ease 0.3s;
      -moz-transition: all ease 0.3s;
      transition: all ease 0.3s;
    }

    .navbar-default .navbar-nav>li>a:after{
       content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #FFC600;
        opacity: 0;
        margin-left: -5px;
    }

    .navbar-default .navbar-nav>li>a:hover:after{
        opacity: 1;
    }

---

FIDDLE:

只需添加使用:after伪元素创建的三角形的样式，以及链接上的:hover的样式，然后应用于该三角形

    .navbar-default .navbar-nav>li>a {
      color: white;
      font-size: 15px;
      line-height: 1px;
      -webkit-transition: all ease 0.3s;
      -moz-transition: all ease 0.3s;
      transition: all ease 0.3s;
    }

    .navbar-default .navbar-nav>li>a:after{
       content: '';
        position: absolute;
        bottom: 0px;
        left: 50%;
        width: 0;
        height: 0;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 5px solid #FFC600;
        opacity: 0;
        margin-left: -5px;
    }

    .navbar-default .navbar-nav>li>a:hover:after{
        opacity: 1;
    }

---

小提琴：

您忘了在

标签中添加一些样式。已使用<代码>：在

选择器之后

最新消息

body{
背景色：黑色；
}
.navbar默认值{
背景色：透明；
边框顶部：0px实心rgba（0,0,0,0.5）；
边框底部：0px实心rgba（0,0,0,0.5）；
左边框：0px实心rgba（0,0,0,0.5）；
右边框：0px实心rgba（0,0,0,0.5）；
-webkit过渡：背景色200ms线性；
-moz过渡：背景色200ms线性；
-o过渡：背景色200ms线性；
-ms过渡：背景色200ms线性；
过渡：背景色200ms线性；
填充顶部：9px；
填充底部：26px；
}
.navbar.navbar-default.navbar折叠{
边界：0；
-webkit盒阴影：无；
盒影：无；
}
.navbar nav>li{
右边框：1px纯白；
左侧填充：14px；
右边填充：14px；
身高：10%；
}
.导航栏导航{
填充顶部：20px；
}
.navbar nav>li:最后一个孩子{
边界：无；
}
.navbar默认值.navbar切换{
边框颜色：rgba（0,0,0,0）；
}
.navbar默认值.navbar切换.图标栏{
背景色：#fff；
}
.导航栏切换{
边缘顶端：19像素；
右边距：43像素；
}
.navbar默认值.navbar nav>li>a{
颜色：白色；
字体大小：15px；
线高：1px；
位置：相对位置；
垫底：3件；
显示：内联块；
}
.navbar默认值.navbar导航>li>a:悬停.navbar默认值.navbar导航>li>a:焦点{
颜色：#fff；
背景色：rgba（255198,0,0）；
-webkit过渡：背景色200ms线性；
-moz过渡：背景色200ms线性；
-o过渡：背景色200ms线性；
-ms过渡：背景色200ms线性；
过渡：背景色200ms线性；
}
.navbar默认值.navbar nav>li>a:：after{
内容：''；
显示：块；
保证金：自动；
高度：3倍；
宽度：0px；
背景：透明；
边缘顶部：15px；
过渡：宽度。5s缓和，背景色。5s缓和；
}
.navbar默认值.navbar nav>li>a:悬停：之后{
宽度：100%；
背景：#FFC600
}
.navbar default.navbar nav>.active>a、.navbar default.navbar nav>.active>a:focus、.navbar default.navbar nav>.active>a:hover{
颜色：#fff；
背景色：rgba（255198,0,0）；
//边框底部：实心#FFC600；
}

您忘了在

标签中添加一些样式。已使用<代码>：在

选择器之后

最新消息

body{
背景色：黑色；
}
.navbar默认值{
背景色：透明；
边框顶部：0px实心rgba（0,0,0,0.5）；
边框底部：0px实心rgba（0,0,0,0.5）；
左边框：0px实心rgba（0,0,0,0.5）；
右边框：0px实心rgba（0,0,0,0.5）；
-webkit过渡：背景色200ms线性；
-moz过渡：背景色200ms线性；
-o过渡：背景色200ms线性；
-ms过渡：背景色200ms线性；
过渡：背景色200ms线性；
填充顶部：9px；
填充底部：26px；
}
.navbar.navbar-default.navbar折叠{
边界：0；
-webkit盒阴影：无；
盒影：无；
}
.navbar nav>li{
右边框：1px纯白；
左侧填充：14px；
右边填充：14px；
身高：10%；
}
.导航栏导航{
填充顶部：20px；
}
.navbar nav>li:最后一个孩子{
边界：无；
}
.navbar默认值.navbar切换{
边框颜色：rgba（0,0,0,0）；
}
.navbar默认值.navbar切换.图标栏{
背景色：#fff；
}
.导航栏切换{
边缘顶端：19像素；
右边距：43像素；
}
.navbar默认值.navbar nav>li>a{
颜色：白色；
字体大小：15px；
线高：1px；
位置：相对位置；
垫底：3件；
显示：内联块；
}
.navbar默认值.navbar导航>li>a:悬停.navbar默认值.navbar导航>li>a:焦点{
颜色：#fff；
背景色：rgba（255198,0,0）；
-webkit过渡：背景色200ms线性；
-moz过渡：背景色200ms线性；
-o过渡：背景色200ms线性；
-ms过渡：背景色200ms线性；
过渡：背景色200ms线性；
}
.navbar默认值.navbar nav>li>a:：after{
内容：''；
显示：块；
保证金：自动；
高度：3倍；
宽度：0