：CSS疑似クラスまたは類似のものに触れますか？

ユーザーがボタンをクリックすると、マウスボタンを押している間にスタイルが変わるようにボタンを作成しようとしています。また、モバイルブラウザでタッチした場合も同様にスタイルを変えてほしい。一見明らかなことは、CSS：active疑似クラスを使用することでしたが、それは機能しませんでした。：focusを試しましたが、うまくいきませんでした。：hoverを試してみたところ、うまくいったようですが、ボタンから指を離してもスタイルは保たれていました。これらの観察結果はすべて、iPhone4とDroid2で行われました。

モバイルブラウザ（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を使わずにもっと簡単な方法があるのではないかと思います。

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

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

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

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

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

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

モバイルはホバーフィードバックを提供しないので、ユーザーとして、リンクがタップされたときに即座にフィードバックを表示したいと思います。私はそれ-webkit-tap-highlight-colorが最も速く反応することに気づきました（主観的）。

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

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

モバイルタッチスクリーンのボタンのスタイリングに問題がありました。これにより、ホバースティック/アクティブボタンの問題が修正されます。

body, html {
  width: 600px;
}
p {
  font-size: 20px;
}

button {
  border: none;
  width: 200px;
  height: 60px;
  border-radius: 30px;
  background: #00aeff;
  font-size: 20px;
}

button:active {
  background: black;
  color: white;
}

.delayed {
  transition: all 0.2s;
  transition-delay: 300ms;
}

.delayed:active {
  transition: none;
}

<h1>Sticky styles for better touch screen buttons!</h1>

<button>Normal button</button>

<button class="delayed"><a href="https://www.google.com"/>Delayed style</a></button>

<p>The CSS :active psuedo style is displayed between the time when a user touches down (when finger contacts screen) on a element to the time when the touch up (when finger leaves the screen) occures.   With a typical touch-screen tap interaction, the time of which the :active psuedo style is displayed can be very small resulting in the :active state not showing or being missed by the user entirely.  This can cause issues with users not undertanding if their button presses have actually reigstered or not.</p>

<p>Having the the :active styling stick around for a few hundred more milliseconds after touch up would would improve user understanding when they have interacted with a button.</p>