鼠標離開背景顏色變化引導程序navbar

我已經使用Bootstrap 3 navbar創建了一個導航菜單。但它有一個小問題：當鼠標移過一個菜單項時，它完全改變其顏色爲深綠色。但是，當我離開菜單時，它不會直接將其顏色更改爲淺綠色。它會迅速變爲灰色（默認）顏色，然後變爲淺綠色。鼠標離開背景顏色變化引導程序navbar

下面是我的導航欄的屏幕：

enter image description here

.navbar-default{ 
    background-color: #4ec67f; 
} 

.navbar-nav > li > a { 
    color: #FFFFFF; 
    font-size: 14px; 
    font-weight: 600; 
    text-transform: uppercase; 
} 

li.active{ 
    background: #34b586 !important; 
} 

li > a:focus{ 
    background: #34b586 !important; 
} 

li:hover > a{ 
    background: #34b586 !important; 
    color: #FFFFFF !important; 
} 

li > a:hover{ 
    color: #FFFFFF !important; 
    background: #34b586 !important; 
}

如何避免這個問題？提前致謝。

來源

2014-10-19 solidshadow

相當艱鉅的任務，調試...圖像 – 2014-10-19 12:23:27

你必須添加一些代碼到這個職位。 – Tim 2014-10-19 12:25:55

在dom inspector中檢查是否有任何課程授予'li'，並且您可以將該懸停樣式添加到該類中 – 2014-10-19 13:05:56

這是一個基本的設置，並且是您所需要的。它看起來像你的問題是，你沒有默認爲你的錨標籤設置顏色。另外，不需要設置焦點樣式，只需處理懸停事件。

http://jsfiddle.net/6uhbh3su/4/

HTML：

<ul> 
    <li> 
     <a href="#">Tab 1</a> 
    </li> 
    <li> 
     <a href="#">Tab 2</a> 
    </li> 
</ul>

CSS：

li a:hover{ 

    background: red; 
    color: white; 
} 
a{ 
    background: black; 
    color: blue; 
    display: inline-block; 
    padding: 3px 8px; 
} 
li{ 
    display: inline-block; 
}

來源

2014-10-19 12:42:59

謝謝，但這不是我想要的。當我將背景色應用到元素時，它在默認狀態下也可見。 – solidshadow 2014-10-19 12:51:12

@solidshadow因此，只需添加該顏色，而不是「黑色」？ – 2014-10-19 12:52:55

鼠標離開背景顏色變化引導程序navbar

回答

相關問題