タッチデバイス向けのサイトを作っていると、どうしてもぶつかる一つの壁、それが:hoverの挙動。以前に僕もその問題に直面し、改善したことがあったので、その経験をメモ。 Ads タッチデバイスの:hoverの挙動がおかしい マウスカーソルを乗せたときのスタイルを設定できるのが:hoverです。 PC向けのサイトだと実に多種多様なホバーアニメーションが実装されており、それらで遊んでいるだけで一日を過ごせる程にそのバリエーションは豊かです。 しかし、この:hover、タッチデバイスにも同じように適用すると少々挙動がおかしいです。指が離れてから:hoverで指定したスタイルが適用され、そのまま元のスタイルに戻りません。 特に問題なのはリンク要素(aタグ)に:hoverを指定した時です。リンク要素をタップしてもリンク先に推移せず、もう一度タップしないといけない場合が見受けられました。 これではユーザ