0

ブートストラップ nav-pills navbar で scrollspy を使用していますが、アクティブなリンクの色やホバーの色を変更できないようです。私はあらゆる種類の組み合わせを試してきましたが、色を変更できない理由をまだ理解できないようです. 理由はありますか？

CSS

#stickysteps {
    background: #1bb246;
    width:100%;
    position: absolute;
    z-index: 2;
}

#stickysteps h3 {
    color: #454545;
    font-size: 1.6em;
    text-shadow: 0px 2px 3px rgba(255,255,255,0.5);
    -webkit-background-clip: text;
     -moz-background-clip: text;
          background-clip: text;
}

.nav-pills{
    background-color: #1bb246 !important;
    width: auto !important;
    height: auto !important;
    box-shadow: none;
}

.nav-pills li {
    background-color: #1bb246;
    width: auto;
    height: auto;
}

.nav-pills li>a>h3:active {
    color: red !important;
}

.nav-pills > .active > a, 
    .nav-pills > .active > a:hover {
    color: #ffffff !important;
    background-color: #1bb246;
}

ナビ

<div id="stickysteps">
    <ul class="nav nav-pills">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
        <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
        <% n += 1 %>
        <% end %>
    </ul>
</div>
4

9 に答える 9

3

これは私のために働いた：
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover { color: red !important; background-color: white; }

于 2016-09-12T09:40:35.647 に答える
0

ul タグに navbar-nav クラスを追加してください。これは、作成した他のスタイルに影響を与えないようにするためのものです。

<ul class="nav nav-pills navbar-nav">
        <% n = 0 %>
        <% @manual.steps.order(:priority).each do |step| %>
       <li><a href="#step<%= n+1 %>"><h3>Step <%= n + 1 %></h3></a></li>
       <% n += 1 %>
       <% end %>
 </ul>

次に、次のように css を追加します。

.navbar-nav> .active > a,
.navbar-nav > .active > a:hover {
      color: #FFF !important;
      background-color: #000!important;
 }

必要なcssを追加してください..うまくいくことを願っています:)

于 2015-09-05T16:17:02.867 に答える
0

プロジェクトに scrollspy プラグインを含む Bootstrap JS ファイルが含まれていることを願っています。現在の jsfiddle は参照されていないため、役に立ちません。

scrollspy は、activeコンテンツが表示されているタブにクラスを追加します。これが、以下が機能する理由です。

変化する

  .nav-pills li>a>h3:active {
    color: red !important;
    }

に

 .nav .nav-pills > .active > a > h3 {
       color: red !important;
     }

アクティブなリンクの色を変更するには

ドキュメントhttp://getbootstrap.com/2.3.2/javascript.html#scrollspyに記載されているように、プラグインがそれぞれ動作するように

ナビゲーション リンクには、解決可能な ID ターゲットが必要です。たとえば、 a <a> href="#home">home</a>must は dom 内の次のようなものに対応します。 <div id="home"></div>

.

于 2013-08-08T18:56:32.177 に答える
-1

30 分間の調査を行った後は、非常に簡単です (私は最低です:$)。

li.'example class'.active {
    CSS
}

したがって、あなたにとってそれは最も可能性が高いでしょう：

li.nav-pills.active {

color: #ffffff !important;

background-color: #1bb246;}
于 2015-03-25T11:16:21.190 に答える