0

Q1.下記例でリンククリックした場合、正しい挙動は?
・アニメーションを最後まで動作させてからリンク遷移
・アニメーション途中でリンク遷移
・アニメーションせずにリンク遷移
・アニメーション内容により異なる?

html

<button class="hoge">
  <a href="/">リンク</a>
</button>

css

.hoge:hover {
    animation: anim 0.5s forwards;
}
@-webkit-keyframes anim

Q2.aタグを外へ出したら意味は変わるでしょうか?

<a href="/">
  <button class="hoge">
    リンク
  </button>

Q3.スマホの実機だけ、リンク遷移しないのですが…
・PCやエミュレーでは動作するのですが、スマホの実機だけリンク遷移しません
・アニメーションされるが、それだけです
・どういった原因が考えられるでしょうか?

1
  • 何をアニメーションするかによって挙動が変わる可能性があるので、問題が再現する完全なコードを示すことをおすすめします。あと、スマホの実機といっても環境は色々なので具体的に書くべきです。
    – int32_t
    Commented 2017年6月5日 14:38

2 件の回答 2

1

スマホではhoverにあたる挙動がないため、
・アニメーションせずにリンク遷移
になると思います。
リンク遷移しないのとhoverは別の問題ではないかと思います。

というかbuttonタグとaタグを併用する必要はないのでは?

<a href="/" class="hoge">リンク</a>

ではいけませんか?

1

スマホでは2回タップすると遷移しませんか?
端末にもよりますが、1回目のタップでhoverの動きになり、2回目で遷移すると思います。
スマホにhoverはないので。

0

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。