送信ボタンの3つの状態

送信ボタンに3つの状態を追加する方法を知りました。州ごとに、私は、ボタンをクリックすると、静かに/触れて、上にホバート時にイメージを変更することを意味します。私は解決策が純粋にHTML & CSSを使用したが、Javascriptもうまくいけば好きだろう。ありがとうございました！送信ボタンの3つの状態

出典

2012-04-11 Dragan Marjanovic

クリックした、あなたは色のクリック動作時の変化（ 'によって答えとして：以下active'場合）を意味しないと言う、またはそれを一度クリックすると、それはその色を変更したまま？ –

を試してみてください。 jqueryでこれを行うことができます：

ボタンに#derp idがあるとします。

$("#derp").click(function(){ 
    this.toggleClass("pressed"); 
});

基本的には、「押した」クラスをその状態に基づいてアイテムに追加または削除します。 .pressedのCSSを追加するだけで、準備は整いました。

#derp {...} 
#derp:hover {...} 
#derp:active {...} 
#derp.pressed {...}

出典

2012-04-12 08:21:15 Ege

hmm ..上記のjQueryコードは何をしているのか分かりません。ボタンクラスを変更しますか？または？申し訳ありませんjQueryを使用していません。 –

jQueryを調べたところ、今はもっと意味があります。ありがとう。 –

遅い返信をおかけして申し訳ありません。そう、javascriptなしでこれを行うネイティブな方法はありません。要素が「押された」クラスを持たない場合、その要素をクリックするとそのクラスが追加されます。そしてもしそうならば、それは単にクラスを削除するだけです。これはjqueryの省略表現のプロパティですが、これはaddClassとremoveClass関数でも行うことができますが、toggleClassは基本的にこれらの両方のために特別に組み合わされています。 – Ege

これはあなたが探しているものですか？

button[type=submit] 
button[type=submit]:hover 
button[type=submit]:active

EDIT：.elementと他の二つのできるスタイル、http://jsfiddle.net/WYTHG/1/

出典

2012-04-11 13:37:57 markvandencorput

しかし、クリックしてそのままの状態でボタンを変更するにはどうすればいいですか？それが押されていることを示すには？ありがとう –

それからあなたはjavascriptを介してクリックでクラスを追加することに頼る必要があります。 – markvandencorput

ありがとうございました。 –

通常の状態があなたのために明確にする必要があります：：ホバーと.element状態はjQueryを使って、このような何かをうまくいく「をクリックし、」維持：アクティブ

出典

2012-04-11 13:39:04

クリックすると、新しいイメージとしてそのまま残るはずです。 –

：アクティブなステータスは、ボタンがクリックされている場合にのみ表示されます。クリック後に画像を変更したい場合は、javascriptソリューションを実装する必要があります。 –

は、私はそれが簡単にそれを容易にするようなものにIDのやクラスを与えることを見つけるこのhttp://jsfiddle.net/jfeltis/Ufs7u/

出典

2012-04-11 13:39:42 Joe

ありがとう、私はボタンが押されたときにそのように留まるようにする方法がわからないのですか？ありがとうございました。 –

希望する効果を得るには、javascript（jQueryは最も簡単な解決策になります）を使用する必要があります。 @ markvandencorputのjsfiddleを参照してください。 – Joe

答えて

関連する問題