スマホでホバーアクションを見せるため、2回目のタップでリンクへ移動するようにしたい
解決したいこと
aタグなどリンク要素に記述したhoverアクションをスマホでも見せたいので
親要素にontouchstart=""を記述し、タップすることでアクションが起こるよう記述しています。
しかし今の記述ではアクションを眺める暇なくリンク先へ飛んでしまいます。
1回タップしたらホバーアクション発動 → 2回目のタップでリンクに行く という仕様にしたいです。
追記) 下記デモサイトを自分のスマートフォン(android, chrome)で確認していたのですが、
希望通りの挙動をする時もあれば1回のタップでリンク先へ飛んだり、何回タップしてもリンク先に行かなかったりと非常に不安定な挙動をします。
もはやaタグに記述したhoverアクションをスマホで見せること、ontouchstartを書いて希望の挙動を実現させようとすることそのものが間違いなのでしょうか？
発生している問題・エラー
<div class="wrapper" ontouchstart="">
<h2 class="for-a">aタグ</h2>
<a href="https://qiita.com/" id="sprite_dancer_a" class="sprite_dancer"></a>
<h2 class="for-div">divタグ(onclick属性)</h2>
<div id="sprite_dancer_div" class="sprite_dancer" onclick="location.href='https://www.google.com/'"></div>
</div>
.sprite_dancer {
background-image: url("../img/test-image.png");
width: 213px;
height: 190px;
background-position: 0 0;
}
// スプライトアニメーション
.sprite_dancer:hover{
animation: sprite 1s steps(10) infinite;
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -2130px 0; }
}
cssにてhover要素が追加されたらアニメーションが発動するように設定しています。
以下はこのコードを書いたデモサイトです。
https://rsaeki0.parallel.jp/sprite-hover/
自分で試したこと
jQueryで、1回目のタップではアニメーションが記述されたクラスを付与して
2回目のタップ時にリンク先へ飛ぶように書いてみました。
.animating {
animation: sprite 1s steps(10) infinite;
}
@keyframes sprite {
from { background-position: 0 0; }
to { background-position: -2130px 0; }
}
// aタグをクリックした回数を記録する変数
let clickCount = 0;
// .sprite_dancerをクリックした際の処理
$(".sprite_dancer").on("click", function(event) {
event.preventDefault();
clickCount++;
if (clickCount === 1) {
// アニメーションを開始する
$(this).addClass("animating");
setTimeout(function() {
// アニメーションが終了したら、再度クリックした場合に備えて、
// animatingクラスを除去する
$(".sprite_dancer").removeClass("animating");
}, 3000);
} else if (clickCount === 2) {
// リンク先へ遷移する
window.location = $(this).attr("href");
}
});
しかしこれは余りにも力技すぎる気がします。
もっとスマートな方法をどなたかご存知ないでしょうか。
どうかご教授お願い致します。
0
