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

2016年07月05日
Sponsored Link

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

関連記事

福岡のウェブデザイン事務所「ハブワークス」

HP作成・リニューアルは福岡のハブワークスまでお気軽にお問い合わせください。ウェブサイト公開後の修正・更新もお任せください。フリーランスだからできるリーズナブルな料金設定でサービスをご提供いたします。

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