超簡単！スマホサイトでもタッチでhoverが効くようにする方法

スマートフォンの普及に伴い、スマホサイトの重要性は年々増しています。

当ブログもスマホ専用サイトでご覧頂いています。

今のところ改造する予定はないのですが、ひとつだけ不満がありました。

リンクをタッチしても、タッチデバイスでhoverが効かない。ということです。

タッチデバイスでもhoverをさせたい

hoverというのはリンクなどにマウスを当てたときに文字色が変化する、などの動きのことです。hoverは非常にポピュラーな手法で、使っていないサイトは０だと思われます。

そんなhoverの基本的な記述方法を紹介します。

a:hover {
	color: #fff;
}

この例はリンクテキストにカーソルを当てると文字が白文字に変化させるという簡単なものです。

今回はこの例で説明してみます。

jQueryですぐに対応可能

以下のコードをjsファイルに記述し、読み込ませます。

(function () {
  var tapClass = "";
  var hoverClass = "";

	var Hover = window.Hover = function (ele) {
		return new Hover.fn.init(ele);
	};
	Hover.fn = {
		//Hover Instance
		 init : function (ele) {
			this.prop = ele;
		}

		, bind : function (_hoverClass, _tapClass) {
			hoverClass = _hoverClass;
			tapClass = _tapClass;

			$(window).bind("touchstart", function(event) {
				var target = event.target || window.target;

				var bindElement = null;
				if (target.tagName == "A" || $(target).hasClass(tapClass)) {
					bindElement = $(target);
				} else if ($(target).parents("a").length > 0) {
					bindElement = $(target).parents("a");
				} else if ($(target).parents("." + tapClass).length > 0) {
					bindElement = $(target).parents("." + tapClass);
				}

				if (bindElement != null) {
					Hover().touchstartHoverElement(bindElement);
				}
			});
		}
		, touchstartHoverElement : function (bindElement) {
			bindElement.addClass(hoverClass);
			bindElement.unbind("touchmove", Hover().touchmoveHoverElement);
			bindElement.bind("touchmove", Hover().touchmoveHoverElement);

			bindElement.unbind("touchend", Hover().touchendHoverElement);
			bindElement.bind("touchend", Hover().touchendHoverElement);
		}
		, touchmoveHoverElement : function (event) {
			$(this).removeClass(hoverClass);
		}
		, touchendHoverElement : function (event) {
			$(this).removeClass(hoverClass);
		}
	}
	Hover.fn.init.prototype = Hover.fn;

	Hover().bind("hover", "tap");
}
)();

あとは、スタイルの記述方法を.hoverに変えるだけです。

a.hover {
	color: #fff;
}

これで終了。

超簡単。

私の場合はスマホサイト専用のCSSファイルを作っていたので、一括置換するだけで済みました。

あとがき