スマホでhover効果を実現するjQueryプラグイン
Posted by @wata_n
スマホの画面タップ時に要素をhoverさせる CSSは、a:hoverの代わりにa.hoverを使う aタグ以外の場合はclassにtapを指定するとCSSで:hoverの代わりに.hoverを使えるようになる
PCではリンクやボタンにカーソルが乗っかったときや押したときの挙動として、スタイルシートで
1
2
| a:hover { color:red; }
a:active { color:red; }
|
のようにやりますが、スマホサイトではこれが出来ません。
そこでFUKULOGのスマホサイトでもそうですが、
jQueryを使ってスマホで:hover効果を実現する | アルパカの具
1
2
3
4
5
6
7
8
| jQuery(function($){
$( 'a, input[type="button"], input[type="submit"], button' )
.bind( 'touchstart', function(){
$( this ).addClass( 'hover' );
}).bind( 'touchend', function(){
$( this ).removeClass( 'hover' );
});
});
|
のようにjsでaタグやボタンを指定して、要素がタッチされたときにhoverやactiveなどのclassを付けることで対応していました。
しかしこれだと、そのページにある無数のaタグやボタンのeventに対して個別にコールバック関数をbindしていくことになり、要素が増えれば増えるほど処理に時間がかかってしまうことになります。
そこでbindするのはwindowのeventに対してのみにし、コールバック関数の中で実際にタッチされている要素を判別するようにしたのが、jquery.taphover.jsです。
from jquery.taphover.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| $(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);
}
});
|
あらかじめjquery.taphover.jsを全ページで読み込んでおくだけで、あとは必要に応じて、
1
| article a.hover { color:red; }
|
のような感じで、該当する要素に対して適宜スタイルを追加していく、という使い方が出来ます。
今後スマホサイトで全面的に移行していくつもりです。
