16

ボタンにグラデーション スタイルを使用しようとしていますが、ホバー スタイルに問題があります。ホバー前のボタンは次のとおりです。

ここに画像の説明を入力

そして、ここにホバーした後があります：

ここに画像の説明を入力

ボタンのhamlは次のとおりです。

= link_to '#', {:class=>'tour_btn btn btn-large btn-primary', :style=>'margin-left: 10px; width: 105px;'} do
        %h3
          Take a Tour

以下：

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
}

任意のアイデアをお願いします? ホバー状態に別のグラデーション スタイルを指定することは可能ですか? または、少なくとも、ホバー時にボタンを変更しないでください。

4

5 に答える 5

31

Twitter Bootstrap はbackground-position、トランジションを使用してホバーをアニメーション化します (背景グラデーションにはトランジションを設定できないため)。あなたの場合、background-gradient が でシフトアップしbackground-position: -15px、その下に background-color が表示されています。

これを修正するbackground-colorには、ホバー時のボタン グラデーションの下部の色に設定します。

.tour_btn {
    #gradient > .vertical(#F98C51, #a35b35);
    &:hover { background-color: #a35b35 }
}
于 2012-09-19T20:00:21.050 に答える
6

ボタンの背景画像を設定している場合、15pxホバーすると背景が上に移動します。に設定できます0px。

.tour_btn:hover {
   background-position: 0px !important;
}
于 2013-03-29T08:19:32.360 に答える
5

ボタンのスタイル設定に LESS の代わりにカスタム CSS を使用する場合は、http://twitterbootstrapbuttons.w3masters.nl/?color=%23F1874Eを試してください。ホバー効果や無効/アクティブ状態を含むカスタム ボタンのすべての css を取得します。

上のボタンには、次の可能性を使用できます。

.btn-custom-lighten.active {
  color: rgba(255, 255, 255, 0.75);
}
.btn-custom-lighten {
  color: #ffffff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #f29461;
  background-image: -moz-linear-gradient(top, #f1874e, #f5a77d);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f1874e), to(#f5a77d));
  background-image: -webkit-linear-gradient(top, #f1874e, #f5a77d);
  background-image: -o-linear-gradient(top, #f1874e, #f5a77d);
  background-image: linear-gradient(to bottom, #f1874e, #f5a77d);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff1874e', endColorstr='#fff5a77d', GradientType=0);
  border-color: #f5a77d #f5a77d #ef7736;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #f5a77d;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */

  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.btn-custom-lighten:hover,
.btn-custom-lighten:focus,
.btn-custom-lighten:active,
.btn-custom-lighten.active,
.btn-custom-lighten.disabled,
.btn-custom-lighten[disabled] {
  color: #ffffff;
  background-color: #f5a77d;
  *background-color: #f39766;
}
.btn-custom-lighten:active,
.btn-custom-lighten.active {
  background-color: #f1874e ;
}

利用方法：

<button class="btn btn-custom-lighten btn-large">Your button</button>

以下の CSS を /after your bootstrap(.min).css に追加します。この CSS を使用すると、ほとんどのブラウザーでカスタム ボタン効果が機能します。

于 2013-03-29T10:33:26.547 に答える
4

css :hover プロパティを使用して、ボタンをホバーしたときの CSS を指定できます。

したがって、あなたの場合、次のようなことをしたいと思うでしょう

.tour_btn:hover {
    /* your custom css */
}

Chrome 開発者ツールを使用すると、ブートストラップによって現在適用されているグラデーションの種類を確認し、CSS でそれらをオーバーライドできるはずです。

于 2012-09-19T19:51:42.877 に答える
1 
.tour_btn:hover {
     background-color: #a35b35;
     background-position: 30px 30px;
}

私はあなたがこれを試すことができるこの解決策を見つけました。シンプルなコードで動作します

于 2015-06-26T07:47:43.537 に答える