: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を使わずにもっと簡単な方法があるのではないかと思います。