2013-11-14 172 views
1

我使用引導3,有一個簡單的導航欄如下...引導3導航欄菜單項 - 淡入和淡出

<div class="collapse navbar-collapse" id="navbar-collapse-1"> 
<ul class="nav navbar-nav"> 
    <li class="active"><a href="#">Home</a></li> 
    <li><a href="#">Item 1</a></li> 
    <li><a href="#">Item 2</a></li> 
    <li><a href="#">Item 3</a></li> 
    <li><a href="#">Item 4</a></li> 
</ul> 
</div> 

這工作正常,但現在我想每個菜單項淡入並在懸停。例如,懸停時 - 在淡入淡出時將背景從白色變爲黑色。

這可能使用自舉轉換?或者我需要獨立於Jquery的Bootstrap嗎?任何幫助或代碼建議表示讚賞。

回答

4

只是顏色和背景添加到錨元素上懸停,就像這樣:

.navbar .nav > li > a { 
    -webkit-transition: all ease .3s; 
     -moz-transition: all ease .3s; 
     -o-transition: all ease .3s; 
      transition: all ease .3s; 
} 

.navbar .nav > li > a:hover { 
    background-color: #000; 
    color: #fff; 
} 

檢查此琴:http://jsfiddle.net/thiagobraga/6yA9h/

+0

是偉大的工作。謝謝回覆! – lowercase