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要素です。この場合、.navクラス内、.navbar-inverseクラス内にある.activeクラスも持つホバー状態のアンカーをターゲットにしています...あなたは:hover を誤ってターゲットにすると、アクティブなクラスは一度に 1 つのリンクのみに適用されます。

次のようなものが必要です。

.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 に答える