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

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

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

このページのもくじ

一番簡単な方法

ontouchstart=""

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

<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"box"</span> <span class="na">ontouchstart=</span><span class="s">""</span><span class="nt">&gt;&lt;/div&gt;</span>

1	<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") &gt;= 0 || userAgent.indexOf("iPad") &gt;= 0 || userAgent.indexOf("Android") &gt;= 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");
			}
		);
	}
});

$(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

その他

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

【脱:擬似クラスhover】全デバイスでhoverイベントを安定させる方法