

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

**html**

[code]

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

**css**

[code]

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

* * *

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

[code]

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

##

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


CC BY-SA 3.0
2017-06-05T04:00:47.707
35288
2019-11-07T15:00:45.090
7886
question
android css html5
CSSの:hoverでアニメーション設定した要素の中でリンク指定すると、スマホ表示ではどうなるのが正しい挙動？


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

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

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

ではいけませんか？


CC BY-SA 3.0
2017-06-29T04:27:27.070
35954
2017-06-29T04:27:27.070
24095
35288
answer


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


CC BY-SA 3.0
2017-06-29T04:47:58.377
35955
2017-06-29T04:47:58.377
24054
35288
answer