パソコンでリンク画像をhoverすると黒くオーバーレイが出てくる動きを
そのままスマホでするとうまく動きません。
タップしてしまうのでそのままリンク先へ飛んで行ってしまいます。
そこで、1回目タップでオーバーレイ発生、2回目でリンク先へ飛ぶ処理を書いてみました。
CSSの設定は参考に。
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0,0,0,0.7);
opacity: 0;
transition: all 0.5s;
}
.overlay_opacity_dark {
opacity: 5;
}
.overlay_opacity_zero {
opacity: 0;
}
$(function () {
//ユーザーエージェントを取得
let ua = navigator.userAgent;
//スマートフォン用の記述
if ((ua.indexOf('iPhone') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) ||ua.indexOf('Android') > 0){
//スマホの時1回目のタップでオーバーレイ2回目でリンク先へ。touchstartを使う
$('.product').on("touchstart",function() {
//オーバーレイのclass".overlay_opacity_dark"がある場合＝２回目のタップの場合
if($(this).children('.overlay').hasClass("overlay_opacity_dark")){
//オーバーレイで暗くなっているところを元に戻す
$('.overlay_opacity_dark').each(function(){
$(this).removeClass('overlay_opacity_dark');
});
//１回目タップの場合
}else {
//タップした箇所以外に暗くなっているところは元に戻す
$('.overlay_opacity_dark').each(function(){
$(this).removeClass('overlay_opacity_dark');
});
//暗くなるclassを追加。「return false」でリンク先へ飛ばないようにする
$(this).children('.overlay').addClass('overlay_opacity_dark');
return false;
}
});
} else {
// PC用（addClass、removeClassを使わない直接CSSを変える記述ver。単純なhoverでOK）
$('.products > .product > .woocommerce-LoopProduct-link').hover(
function() {
$(this).children('.overlay').css('opacity','5');
},
function() {
$(this).children('.overlay').css('opacity','0');
}
);
}
});