鼠标离开bootstrap导航栏上的背景颜色变化

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