スマホやタブレットなどタッチスクリーンのデバイスでもタップした時にホバーエフェクトを効かせる小技

2016年07月05日
follow us in feedly

hoverアイキャッチ

スマホやタブレットなどタッチスクリーンのデバイスはカーソルが乗っている要素にスタイルを適用する: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;
}
follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ