javascript - background color change on mouse leave bootstrap navbar -

javascript - background color change on mouse leave bootstrap navbar -

i have created navigation menu using bootstrap 3 navbar. has little issue: when mouse moves on menu item alter color dark green. when leave menu, not straight changes color light-green. changes gray(default) color , turn lite green.

below screen of navigation bar:

.navbar-default{ background-color: #4ec67f; } .navbar-nav > li > { 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; }

how avoid problem? in advance.

this basic setup, , need. looks issue you're not setting color on anchor tags default. also, no need set focus style, deal hover event.

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

javascript jquery html css twitter-bootstrap