
スマートフォンの普及に伴い、スマホサイトの重要性は年々増しています。
当ブログもスマホ専用サイトでご覧頂いています。
今のところ改造する予定はないのですが、ひとつだけ不満がありました。
リンクをタッチしても、タッチデバイスでhoverが効かない。ということです。
スポンサーリンク
タッチデバイスでもhoverをさせたい
hoverというのはリンクなどにマウスを当てたときに文字色が変化する、などの動きのことです。hoverは非常にポピュラーな手法で、使っていないサイトは0だと思われます。
そんな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ファイルを作っていたので、一括置換するだけで済みました。
あとがき
やっとスマホサイトもタッチでhoverアクションが効くようになりました。
サイトを見てくれる方が少しでも「おっ。」って思ってくれたら嬉しいです。
スポンサーリンク