[英]How to add hover animations to bootstrap navbar links?
我試圖將在這里找到的導航動畫之一添加到我的引導導航中。 添加類沒有用,更改導航欄css也沒有用,所以我需要一些幫助。
導航HTML:
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index-en.html"><img class = "logo" src = "logo.png" alt = ""></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a class = "active" href="#">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="employees.html">Employees</a></li>
<li><a href="where.html">Where we are</a></li>
<li><div class="btn-group">
<a href="index.html" class="btn btn-default"><img src="img/hr.png" alt="" title = "Hrvatski" > </a>
</div></li>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
當前相關的CSS:
.navbar-default .navbar-nav > li > a {
color: #4E4F51!important;
text-transform: uppercase!important;
font-size: 15px;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #3BB34A!important;
background-color: transparent!important;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #3AB44A!important;
background-color: transparent!important;
}
那么,如何實現從上述鏈接到我的導航欄的動畫之一?
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index-en.html"><img class = "logo" src = "logo.png" alt = ""></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right pullDown">
<li class="active"><a class = "active" href="#">Home</a></li>
<li><a href="about.html">About us</a></li>
<li><a href="employees.html">Employees</a></li>
<li><a href="where.html">Where we are</a></li>
<li><div class="btn-group">
<a href="index.html" class="btn btn-default"><img src="img/hr.png" alt="" title = "Hrvatski" > </a>
</div></li>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
// add this in your css
li.pullDown a:before
{
position: absolute;
width: 100%;
height: 2px;
left: 0px;
top: 0px;
content: '';
background: #FFF;
opacity: 0.3;
transition: all 0.3s;
}
li.pullDown a:hover:before
{
height: 100%;
}
好吧,我想通了,只需要添加這個選擇器:
.navbar-default .navbar-nav > li > a:before {
position: absolute;
width: 100%;
height: 2px;
left: 10px;
bottom: 45px;
content: '';
background: green;
opacity: 0.3;
transition: all 0.3s;
}
.navbar-default .navbar-nav > li > a:hover:before{
height: 100%;
}
我之前可能已經嘗試過,但是背景色設置為#FFF(與navbar相同),所以我看不到任何動畫。 無論如何,謝謝您的建議。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.