1

私は BootStrap ページに取り組んでおり、ベース ボタンの色の CSS とホバリング時の色の変更を変更しようとしています。

ボタンにはわずかなグラデーション効果があります。ユーザーがボタンにカーソルを合わせると、(グラデーションを維持しながら) 色を少しだけ変更して、ホバー状態を示します。

私が使用しているグラデーションは、背景色に基づいています。ブラウザでのフォールバック サポートにより、私の生活が楽になります。

ここに私がやっていることを正確に示す JSFiddle があります: http://jsfiddle.net/toddhd/5JybP/

.btn-inverse {
  background-color: #67e667;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

.btn-inverse:hover,
.btn-inverse:focus,
.btn-inverse:active,
.btn-inverse.active,
.btn-inverse.disabled,
.btn-inverse[disabled] {
  background-color: #5ee55e;
}

問題は、ボタンの見た目はとても良いのですが、ホバー効果が壊れているように見えることです。素敵なグラデーションを表示する代わりに、「下からスライドイン」して、2 つの水平バーの色を表示するだけです。

この例では、背景色のみを変更していますが、最初のクラスと同様に、すべての CSS プロパティを再宣言しようとしました。同じ問題が発生します。

私は何を間違っていますか？

4

1 に答える 1

2

ブートストラップ クラスを上書きする場合は、ID を使用します。ブートストラップ ブートストラップを保持することをお勧めします。これにより、すべてが正常に機能し (レイアウト、モーダル ウィンドウなどを考える)、デモで表示されるものが得られるようになります。現在、独自のクラスでブートストラップを上書きしています。

あなたの問題は、ブートストラップがbackground-position: 0 -15pxコードによって考慮されていない を宣言していることです。これは、 を含めることで上書きできますbackground-position: 0。を赤に変更して、background-color機能していることをより明確に示しました。元に戻してください。:)

これがフィドルです：http://jsfiddle.net/5JybP/8/

コードは次のとおりです。

HTML

<a href="#" id="btn-inverse" data-toggle="dropdown" class="btn btn-inverse btn-small dropdown-toggle">
    Logged in as Todd<span class="caret"></span>
</a>

CSS

#btn-inverse {
  background-color: #67e667;
  background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-image: linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background-repeat: repeat-x;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  color: #ffffff;
  -webkit-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}

#btn-inverse:hover,
#btn-inverse:focus,
#btn-inverse:active,
#btn-inverse.active,
#btn-inverse.disabled,
#btn-inverse[disabled] {
  background-color: red;
  background-position: 0;
}

ジョシュア

于 2013-11-04T17:53:20.543 に答える