2

だから私は典型的なシナリオを持っています: :hover 疑似クラスを使用してホバーしたときにその色を遷移するようにスタイル設定されたボタン。
ボタンには :active トリガー クラスもあり、クリックすると再び色が変わります。しかし、今回はトランジションが必要ないため、このクラスではすべてのトランジションが無効になっています (変更をスムーズにしたい)。

私が抱えている問題は、これはクリックのマウスダウン部分では機能しますが、マウスボタンが離されると :active 状態が存在しなくなり、これにより遷移が発生するため、マウスアップ部分では機能しないことです (つまり、ボタンのクラス定義の一部) を適用します。

これを機能させる方法はありますか?
おそらく、jQuery で動作をやり直すことができます。しかし、理想的には、JavaScript に頼らずにこれを実現したいと考えています。

実際の例はこちらです。

ありがとう。

4

3 に答える 3

1

あなたはトリックでそれを行うことができます

たとえば、背景ではなく影で色を変更できます。

button:active {
    -webkit-box-shadow: inset 0 0 100px green;
}

次に、残りの唯一の変更は、すべてではなく、背景色への移行を制限することです

button {
    transition: background-color 1s;
}

本当にあなたが望んでいたものではありませんが、私が得ることができる限り近い:-)

于 2013-02-11T22:02:49.830 に答える
0

これは、アクティブなボタンの状態とベース ボタンの状態に異なる遷移を追加することにより、CSS のみで実行できます。

  • ベース ボタンに none の遷移を追加します。これは、ベース状態への遷移が瞬時になることを意味します。
  • 次に、目的のトランジションをボタンに追加します。これは、アクティブな状態 (マウス ダウン) へのトランジションに時間がかかることを意味します。

CSS の例を次に示します: http://codepen.io/anon/pen/hEmbl

button {
  background:#009;
  color:#fff;
  padding:1em;
  border:0;
  border-radius:4px;
  -webkit-transition:none;
}

button:active {
  background:#090;
  -webkit-transition:all 1s;
}
于 2013-03-27T07:42:49.140 に答える