javascript - 鼠标离开 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

这是一个基本设置，是您所需要的。看起来您的问题是默认情况下您没有在 anchor 标签上设置颜色。另外，无需设置焦点样式，只需处理悬停事件即可。

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