[解決済み] :touch CSS pseudo-class or something similar?

質問

マウスボタンを押したまま、クリックするとスタイルが変わるようなボタンを作りたいと思っています。また、モバイル ブラウザでタッチされた場合にも、同様にスタイルを変更したいと思います。一見すると、CSSの:active擬似クラスを使うのが一番わかりやすいのですが、これはうまくいきませんでした。フォーカスを試してみましたが、これもうまくいきません。hoverも試してみましたが、ボタンから指を離した後もそのスタイルが維持されました。これらの観察はすべて、iPhone 4 と Droid 2 で行われました。

モバイル ブラウザ (iPhone、iPad、Android、およびできればその他) で効果を再現する方法はありますか? 今のところ、私はこのようなことを行っています。

<style type="text/css">
    #testButton {
        background: #dddddd;
    }
    #testButton:active, #testButton.active {
        background: #aaaaaa;
    }
</style>

...

<button type="button" id="testButton">test</button>

...

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.1.min.js'></script>
<script type='text/javascript'>
    $("*").live("touchstart", function() {
      $(this).addClass("active");
    }).live("touchend", function() {
      $(this).removeClass("active");
    });
</script>

デスクトップ用には:active擬似クラス、タッチ用にはactiveクラスがあります。

私は、Javascript を使用せずに、よりシンプルな方法がないかと考えています。

どのように解決するのですか？

のようなものはありません。 :touch というのは、W3Cの仕様では http://www.w3.org/TR/CSS2/selector.html#pseudo-class-selectors

:active はうまくいくはずだ、と私は思う。

の順序は :active / :hover 擬似クラスは正しく機能するために重要です。

以下は、その上のリンクからの引用です。

インタラクティブなユーザーエージェントは、ユーザーの操作に反応してレンダリングを変更することがあります。CSS では、よくあるケースに対して 3 つの擬似クラスを提供しています。

• hover 擬似クラスは、ユーザが（何らかのポインティングデバイスで）要素を指定する際に適用されます。 (を指定するが、アクティブにしない場合に適用されます。 は適用されません。例えば、視覚的な ユーザエージェントは、この 擬似クラスは、カーソル（マウス ポインタ）が要素によって生成されるボックスの上に乗ったとき，この擬似クラスを適用することができる。 を適用することができる。インタラクティブメディアをサポートしない利用者エージェント インタラクティブメディアをサポートしない利用者エージェントは，この擬似クラスをサポートする必要はない。 この擬似クラスをサポートする必要はない。 をサポートする適合する利用者エージェントもある。 は，この擬似クラスをサポートできないことがある。 は，この擬似クラスをサポートすることができないかもしれない（例えば，ペン デバイスなど)。
• アクティブ擬似クラスは、要素がユーザーによって活性化されている間、適用されます。 を適用します。例えば ユーザがマウス ボタンを押してから離すまでの間。
• :focus 疑似クラスは、要素がフォーカスを持つ間適用されます。 (キーボードイベントや他の形式のテキスト入力を受け入れる) フォームのテキスト入力) の間適用されます。