鼠标离开背景颜色变化引导程序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

回答

相关问题