スマホやタブレットなどタッチスクリーンのデバイスはカーソルが乗っている要素にスタイルを適用する:hover擬似クラスが使えません。

そこで、スクリーンをタップした時にホバーエフェクトを効かせる小技をご紹介。

jQueryなら簡単

次のコードを追加します。

$('a')
  .bind('touchstart', function(){
    $(this).addClass('hover');
}).bind('touchend', function(){
    $(this).removeClass('hover');
});

内容は簡単で、.bindでa要素にタッチイベントで実行させたい関数を紐づけています。

紐づけている関数はtouchstartでhoverというクラス名を追加して、touchendで削除というシンプルな内容。

ちなみにtouchstartはタップされた時、touchendはタップした指が離れた時です。

※WordPressで使う場合はコンフリクトを避けるために＄の代わりにjQueryと記述すればいいですよ。

とりあえず、これでサクッとタッチイベントに連動したクラスが追加できるので、cssを指定してあげればokです。

a.hover {
  background-color: #000;
}