在悬停时更改链接颜色

Question

For the links in the navigation bar On hover I need to give blue color but its not working. Instead it showing white color.

How to fix the issue?

Providing my code below.

http://jsfiddle.net/7HzPd/

http://jsfiddle.net/7HzPd/embedded/result/

<div class="container">
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>
    <a class="brand" href="#">
        <img alt="change" class="defieLogo" src="http://www.defie.co/designerImages/defie_logo_only.png">
    </a>
    <div class="nav-collapse collapse">
        <ul class="nav">
            <li class="active">
                <a href="/docs/examples/product.html">Product</a>
            </li>
            <li>
                <a href="/docs/examples/solution.html">Solutions</a>
            </li>
            <li>
                <a href="/docs/examples/service.html">Services</a>
            </li>
            <li class="iphonePartnerLink">
                <a href="/docs/examples/partner.html">Partners</a>
            </li>
            <li class="iphoneContactLink">
                <a href="/docs/examples/contact.html">Contact</a>
            </li>
        </ul>
        <ul class="nav" id="navSecond">
            <li class="">
                <a href="/docs/examples/partners.html">Partners</a>
            </li>
            <li>
                <a href="/docs/examples/contact.html">Contact</a>
            </li>
        </ul>
        <form class="navbar-form pull-right">
            <input class="span2" type="text" placeholder="Email">
            <input class="span2" type="password" placeholder="Password">
            <button type="submit" class="btn">Sign in</button>
        </form>
    </div>
    <!--/.nav-collapse -->
</div>

Answer 1

The only code I see that has hover is here:

.navbar-inverse .nav .active > a:hover{
       background-color: transparent;
}
.navbar-inverse .nav .active > a:hover{
      color: #14486b;
} 

First you should combine these elements, go through your css and clean it up some, no reason to have those separated.

To your question, that is the only :hover elements I saw, in which case you are targetting any anchor with hover state that also has the .active class which is inside .nav class, inside .navbar-inverse class... You are targetting the :hover incorrectly, the active class applies to only one link at a time.

You should have something more like:

.nav li a:hover {}

EDIT:

Found the culprit further down.

Theres a hover state in bootstrap.css on line 4740 that is over-writing your styling. Try putting a !important on the hover you put in, also make sure your style sheet is included beneath the bootstrap.css. You could also edit the bootstrap css directly.

Answer 2

Doesn't this work?

a:hover
{
background-color:blue;
} 

And just change a to something more specific if you want.