鼠標離開引導程序導航欄時的背景顏色更改

Question

我已經使用Bootstrap 3導航欄創建了一個導航菜單。 但這有一個小問題：當鼠標移到菜單項上時，它會完美地將其顏色更改為深綠色。 但是當我離開菜單時，它不會直接將其顏色更改為淺綠色。 它迅速變為灰色（默認）顏色，然后變為淺綠色。

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

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

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

Answer 1

這是一個基本設置，這就是您所需要的。 看來您的問題是，默認情況下您沒有在錨標簽上設置顏色。 另外，無需設置焦點樣式，只需處理懸停事件即可。

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