jQueryを使ってスマホで:hover効果を実現する | アルパカの具スマホの”:hover”の動き iPhoneやAndroid向けのサイトを作っていてCSSのa:hoverで文字色を変えたいとき、文字の色が戻らなくなったり、ブラウザバックしても色が変わったままだったりします。 a:activeで直るかなーとか思って試しても全然効かない始末。 そんな時はJavaScriptに頼っちゃおう これはCSSではどうしようもないので、JavaScriptのtouchイベントを使って、タッチしている間だけ hover というクラスを付けるようにします。 jQueryを使えばとっても簡単に実装できちゃいます。aタグとボタン系のタグをターゲットにした場合のソースが下記です。 そして、CSSでは”:hover”の代わりに”.hover”を使うようにするだけです。 jQuery(function($){ $( 'a, input[type="button"], in
