スマホサイト

スマホでhoverを有効にする方法

投稿日:2018年8月22日 更新日:

PC用のサイト制作ではお馴染みの「hover」エフェクトだけど、スマホサイトの場合はこれが効かない。
スマホサイトでも「hover」エフェクトを有効にする方法を調べてみました。できるだけ簡単に対応できるようにしたいというのもポイントにしました。

CSSでhoverを指定したものは、PCではhoverしているとき、スマホではタップして指が離れるときにhoverが有効になるらしい。

一番簡単な方法

<code>ontouchstart=""</code>

を加えるだけ!
bodyにontouchstart=""を指定すれば、子要素がタッチ時に反応するようになる。属性のプロパティは空でOKです。
ontouchstart=""である必要はない ontouchendでも可能。

<span class="nt"><div</span>
<span class="na">class=</span>
<span class="s">"box"</span>
<span class="na">ontouchstart=</span>
<span class="s">""</span>
<span class="nt">>これは設定例です</div></span>

スマホでhoverエフェクト

ただ、iphoneでテストしてみると、PCのhoverのようには動かず、ボタンとしての認知性は向上しないように感じた。
もう少し頑張ってリサーチ。

いろいろ調べてみると、JQueryを使うというのが圧倒的に多かった。

でもプログラムには疎いので、JQueryやJavaScriptは敷居が高い。。。(汗)
けれど、ここで止まっていては前に進まないので、意を決して、いくつか公開されているコードをひとつずつコピペし、地道に検証してみることにした。その結果、ちゃんと作動したのが下のコード。

JQueryを使う

$(function () {
  // hover
	var userAgent = navigator.userAgent;
	var item = $("a").add("button");

	if (userAgent.indexOf("iPhone") >= 0 || userAgent.indexOf("iPad") >= 0 || userAgent.indexOf("Android") >= 0) {
		item.on("touchstart", function () {
			$(this).addClass("hover");
		});
		item.on("touchend", function () {
			$(this).removeClass("hover");
		});
	} else {
		item.hover(
			function () {
				$(this).addClass("hover");
			},
			function () {
				$(this).removeClass("hover");
			}
		);
	}
});

解説

JavaScriptで扱えるイベントに「タッチイベント」というものがあり、タッチデバイスでユーザーがスクリーンに触れた時の動作を取得することができます。

「タッチイベント」の中では、下の3種類がよく使われています。

 ◎touchstart = タッチが開始した瞬間に発生

 ◎touchmove = タッチの後、指を画面上で動かす度に発生

 ◎touchend = タッチの後、指を画面から離した瞬間に発生

 

このイベントを使ってタッチデバイス用のホバースタイルを設定すればよいのですが、PCからの閲覧時にはタッチイベントが使えず、従来の:hoverでスタイルを設定しなければならないという問題があります。

 
それを解決するためにこのコードでは、タッチデバイスではtouchstart、それ以外ではhoverというふうに条件を分岐できるように、if文でユーザエージェントでの振り分けを行っています。
 後は、タッチデバイスならタッチが開始した時にhoverスタイル用のクラスを追加し、タッチが終わった時にクラスを削除。
PCの方も同様で、jQueryのhoverイベントを使ってCSSの:hoverと同じ挙動になるようクラスを追加・削除しています。
 
この方法ならクラスで一元的に管理できるのでメンテナンス性も高いです。
実際にiphoneでテストしてみましたが、バッチリ!でした。 
 

出典:http://www.beclue.net/front-end/touch-hover

その他

リサーチ中にみつけた説明がわかりやすかったサイト

本サイトの内容に誤りや不正確な記述がある場合やサンプルに基づくいかなる結果も一切の責任を負いかねますので、あらかじめご了承ください。

-スマホサイト

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

CSS 可変で文字サイズを変更する

「画面サイズに合わせて文字の大きさも変化させたい」けど、「em」や「rem」や「%」ではうまくいかない。 早速ググってみると。。。ありました! vw(ViewportWidth)とvh(Viewpor …

スマホサイトのメニューづくり

  スマホサイトの制作にあたり、最近はどんなメニューが主流なのか調べることにした。 以前は3本線のハンバーガーメニューで下に伸びるアコーディオン式が多かったように思ったけど、最近はスルッと横 …

サイト制作・グラフィック制作をしているデザイナーです。制作で躓いたことの備忘録としてこのブログを始めました。
たくさんの検索結果から、実際に何度も何度も自分で試してみて、自分に合うなと思った方法やうまくいった方法をこのブログに書き留めています。
プログラム関係のことはもっぱらコピペ派。
自分でゴリゴリ書くことはできません。。。プログラムが分かる人がうらやましいです。
そんな私でもなんとかサイト制作ができるのはグーグル先生と貴重な情報をおしげもなく公開してくださっているたくさんの方々のおかげ。
有志のみなさまに日々感謝しつつ制作させていただいています。