[英]Underline on Hover Navigation Item
我正在尝试在引导导航项目上实现此CSS。 它可以工作,但是实际的下划线实际上与实际的单词相去甚远。 我想用动画在实际单词下划线,而不是在导航栏的边框下划线。
我不知道这是为什么或如何解决。 这是CSS:
li > a {
position: relative;
color: #595959;
text-decoration: none;
}
li > a:hover {
color: #595959;
}
li > a:before {
content: "";
position: absolute;
width: 100%;
height: 2px;
bottom: 0;
left: 0;
background-color: #595959;
visibility: hidden;
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
}
li > a:hover:before {
visibility: visible;
-webkit-transform: scaleX(1);
transform: scaleX(1);
}
和HTML:
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#">Features</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us </a></li>
</ul>
</div>
我不确定您发布的所有css发生了什么—似乎都没有强调任何内容。 我认为大多数想要在块下划线的人都只是使用border-bottom
属性。 然后可以使用padding-bottom.
设置距离padding-bottom.
这是一个简化的小提琴: http : //jsfiddle.net/markm/7vez27oc/
您可以在最后一个css块的padding-bottom
更改文本和下划线之间的距离
同样,您应该对navitem
使用class=
。 id=
表示唯一性。
看来您正在尝试在导航项的悬停上执行下划线。
这是一个使用CSS过渡为链接元素添加下划线的示例。
该示例应该足够容易地修改为bootstrap nav元素,如果您有jsFiddle,则可能更容易派生它并帮助您解决问题。
html
<a href="#">Link Hover</a>
的CSS
a {
font-size: 1.5em;
color: #2c6700;
text-decoration: none;
-ms-transition:all .5s ease-in;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
}
a:hover {
color:#c3c3e5;
border-bottom: 1.2px solid #c3c3e5;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.