1

对于导航栏中的链接悬停我需要给蓝色，但它不工作。相反，它显示白色。

如何解决问题？

在下面提供我的代码。

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>
4

2 回答 2

3

我看到的唯一悬停代码在这里：

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

首先你应该结合这些元素，检查你的CSS并清理一些，没有理由将它们分开。

对于您的问题，这是我看到的唯一 :hover 元素，在这种情况下，您的目标是任何具有悬停状态的锚点，该锚点也具有 .active 类，该类位于 .nav 类中，在 .navbar-inverse 类中......你是错误地定位 :hover 时，活动类一次仅适用于一个链接。

你应该有更多类似的东西：

.nav li a:hover {}

编辑：

在更深的地方找到了罪魁祸首。

在第 4740 行的 bootstrap.css 中有一个悬停状态，它覆盖了您的样式。尝试在!important您放置的悬停上放置一个，同时确保您的样式表包含在 bootstrap.css 下方。您也可以直接编辑引导 css。

于 2013-02-04T18:17:08.710 回答
1

这不行吗？

a:hover
{
background-color:blue;
}

如果您愿意，只需更改a为更具体的内容。

于 2013-02-04T18:19:53.923 回答