web-dev-qa-db-ja.com

：touch CSS擬似クラスまたは類似の何か？

ユーザーがクリックすると、マウスボタンが押されている間にスタイルが変更されるように、ボタンを作成しようとしています。また、モバイルブラウザーで触れた場合に、同様の方法でスタイルを変更してほしい。私にとって一見明らかなことは、CSS：active疑似クラスを使用することでしたが、うまくいきませんでした。 ：focusを試しましたが、うまくいきませんでした。私は：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疑似クラスはデスクトップブラウザー用であり、アクティブクラスはタッチブラウザー用です。

Javascriptを使用せずに、もっと簡単な方法があるかどうか疑問に思っています。

javascriptjqueryhtmlcssmobile
78
Elias Zamaria

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

:activeは機能するはずです。

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

上記のリンクからの引用です

インタラクティブなユーザーエージェントは、ユーザーのアクションに応じてレンダリングを変更することがあります。 CSSは、一般的な場合に3つの疑似クラスを提供します。

  • ：hover疑似クラスは、ユーザーが（ポインティングデバイスを使用して）要素を指定している間に適用されますが、アクティブにはなりません。たとえば、ビジュアルユーザーエージェントは、カーソル（マウスポインター）が要素によって生成されたボックスの上に置かれたときに、この擬似クラスを適用できます。インタラクティブメディアをサポートしていないユーザーエージェントは、この擬似クラスをサポートする必要はありません。インタラクティブメディアをサポートする一部の適合ユーザーエージェントは、この擬似クラス（ペンデバイスなど）をサポートできない場合があります。
  • ：active疑似クラスは、ユーザーが要素をアクティブにしている間に適用されます。たとえば、ユーザーがマウスボタンを押してから離すまでの間。
  • ：focus疑似クラスは、要素にフォーカスがあるときに適用されます（キーボードイベントまたは他の形式のテキスト入力を受け入れます）。
44
Doug Chamberlain

モバイルはホバーフィードバックを与えないので、ユーザーがリンクをタップしたときに即座にフィードバックが表示されるようにします。きがついた -webkit-tap-highlight-colorは、応答が最も速い（主観的）です。

以下を身体に追加すると、リンクにタップ効果があります。

body {
    -webkit-tap-highlight-color: #ccc;
}
17
Abdo