スマホ向けにサイトを作っていると、ブラウザの挙動が遅くてUXを低下させてしまうことがあります。例えば、画面をタッチしたときの:hoverの挙動。あと、jQueryのanimate()の挙動。とか。 スマホブラウザはJavaScriptの実行速度が遅いので、animate()の挙動とかはCSSで書くのがベストです。これはよく知られているので、実装されているサイトも多いのではないでしょうか。(あ、具体的な実装はまた次回ご紹介したいと思います。) 今回はですね、あまり話題にならない:hoverのことです。 :hover がおかしい? マウスカーソルを乗せたときのスタイルを設定するのが:hoverです。スマホだとタッチした瞬間に適用されると思いますよね。でも例えばiPhoneで:hoverを使うと、指を離したときにスタイルが適用されます。ですので、「もう押してないのに…」という場所が「押されたスタ
![スマホだと反応が遅れる :hover を心地良くする方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/0b54a4e00fb98880d9a6f77441f3bdbbf85b9d13/height=288;version=1;width=512/http%3A%2F%2Fsensebahn.com%2Fwp-content%2Fthemes%2Fsensebahn%2Fimages%2Fsensebahn300.png)