スマホでパソコンと同じマウスオーバーの効果を与える方法

スマホはタッチ操作です。

なので、タッチした時と指を離した時に、マウスオーバーと同じ変化をさせるように設定します。

スポンサーリンク

base.jsにコードを追加

javascript

var linkTouchStart = function(){
thisAnchor = $(this);
touchPos = thisAnchor.offset().top;
moveCheck = function(){
nowPos = thisAnchor.offset().top;
if(touchPos == nowPos){
thisAnchor.addClass("hover");
}
}
setTimeout(moveCheck,100);
}
var linkTouchEnd = function(){
thisAnchor = $(this);
hoverRemove = function(){
thisAnchor.removeClass("hover");
}
setTimeout(hoverRemove,500);
}

$(document).on('touchstart mousedown','a',linkTouchStart);
$(document).on('touchend mouseup','a',linkTouchEnd);

上記の設定をすると、パソコンでマウスオーバーした時と同じ効果をスマホで実現可能になります。

class名「hover」は、使用するテーマのclass名に変更してください。

他には、以下のような方法もあります。

スポンサーリンク