【CSS】スマホのhoverアニメーション対応【タップ／ontouchstart】

パソ君

・スマホでのhoverアニメーションはどうする？

こんな疑問にお答えします。

「:hover」の疑似クラスを使えば、ホバー時の挙動が実装できますよね。

ただスマホの場合、PCとは挙動が異なります。

そのためhoverアニメーションをスマホ時でも対応するため、異なる実装方法が必要です。

とはいえ簡単に実装可能！

ジト

すぐにできるよ！

ということで、この記事では「スマホのhoverアニメーション対策」について解説していきます！

【CSS】スマホ（タッチ端末）とPCのhover挙動を比較

スマホとPCではhoverの挙動が異なります。

どちらかというとスマホでは「:active」を使った挙動が、PCでいう「:hover」の挙動という感じですね。

簡単に説明するとこちらになります↓

つまりスマホの場合、hoverが効いていると、違う要素をタップするまでスタイルが効いてしまう。

あまりよろしくないですよね。。

そのためスマホ時では「:active」を使って反映させる実装方法に変えたほうが良いかと。

【CSS】スマホのhoverアニメーション対応手順⓪【何もしていないと】

ただ、そのまま「:hover」と「:active」を指定すればよいわけではないんですよね。

というのもSafariで見ると、aタグとbuttonタグにしかアニメーションが効かないため。

サンプルを見てみると・・

下記がサンプルになります。
スマホのSafariで見てみてください。

See the Pen hoverアニメーション対応【そのまま】 by jito-coder (@jito-coder) on CodePen.

色々な要素を作成しました。
が、aタグとbuttonタグのhoverした時反応しませんよね。

（Codepenだと反応しました。。普通にテストサイトにアップすると反応しないのですが。。とりあえず挙動が異なる状態になります）

そのためSafariでも、タップ時に反応させるように実装しましょう。

次にその実装方法を紹介します。

【CSS】スマホのhoverアニメーション対応手順➀【ontouchstart属性を使う】

Safariでもタップイベントを実装する方法が「ontouchstart属性」を使うこと。

この属性を使えば、スマホやタブレットでタッチした時にイベントを発生できます。

そのため「:hover」や「:active」動作がスマホでも対応可能になるんですよね。

ontouchstart属性の使い方

使い方は下記になります。

<div ontouchstart="">

</div>

イベントを発生させたい大枠に対して「ontouchstart=””」を記述するだけです。

値は空白でOK。

ontouchstart属性を使ったサンプル

下記が「ontouchstart属性」を使ったサンプルになります。

スマホのSafariでもタップイベントが効いてるのではないでしょうか。

See the Pen hoverアニメーション対応【ontouchstart属性】 by jito-coder (@jito-coder) on CodePen.

これで反応はOK。

ただし・・

ただし先述したように、スマホ時では「:active」で反応させたいです。

つまり下記のようにしたい↓

• PC　 ⇒hoverのみを効かせる
• スマホ⇒activeのみを効かせる

次にその実装方法を紹介していきます。

【CSS】スマホのhoverアニメーション対応手順➁【メディアクエリ】

PCとスマホで指定を変える対応方法が「メディアクエリ」を使うこと。

そんな方法のコードが下記になります↓

@media (hover: hover) {
  /* hoverが使える端末 PC想定 */
}

@media (hover: none) {
  /* hoverが使えない端末 スマホ想定 */
}

閲覧中の端末でhoverが使えるか否かにより、スタイルを切り替えることが可能です。

これでPC時には「:hover」を使い、スマホ時では「:active」を使うことができます。

そのうえでアニメーションの指定をすれば良い感じの挙動で実装可能。

例として下記ですね。

@media (hover: hover) {
  /* hoverが使える端末 PC想定 */
  a:hover {
    opacity: .8;
  }
}
@media (hover: none) {
  /* hoverが使えない端末 スマホ想定 */
  a:active {
    opacity: .8;
  }
}

サンプルがこちら

そして実際に作成したサンプルがこちら↓

See the Pen hoverアニメーション対応【メディアクエリ】 by jito-coder (@jito-coder) on CodePen.

PC時にはhover、スマホ時ではactiveのみイベント発動するようになっているかと。

これでスマホのhoverアニメーション対応が完成しました！

まとめると・・

要は手順をまとめると下記になりますね。

1. 「:active」を使ってアニメーションを指定
2. ontouchstart属性を使ってSafariでもタップイベント発生するように
3. メディアクエリを使ってPCとスマホ時で切り替える

【番外編】ontouchstart属性ではなくjQueryを使ったやり方

最後にontouchstart属性ではなくjQueryを使ったやり方を紹介します。

そんなサンプルがこちら↓

See the Pen hoverアニメーション対応【jQuery】 by jito-coder (@jito-coder) on CodePen.

<a href="" class="link js-sphover">文字リンク</a>

.link.hover-anime {
  color: red;
}

$(function () {
    $('.js-sphover').bind('touchstart', function () {
        $(this).addClass('hover-anime');
    }).bind('touchend', function () {
        $(this).removeClass('hover-anime');
    });
});

jQueryで使用してるイベントがこちら↓

ようはタップした時、離れた瞬間にクラスの付け外しをするということ。

その付け外すクラスに対して、アニメーションさせたいCSSを記述すれば実装できます。

【CSS】スマホのhoverアニメーション対応【タップ／ontouchstart】：まとめ

• スマホとPCではhoverの挙動が異なる
• スマホでは「:active」を使った挙動の方が良い
• ただそのまま指定してSafariで見ると、aタグとbuttonタグにしかアニメーションが効かない
• 「ontouchstart属性」を使えばSafariでもタップイベントが効く
• 「メディアクエリ」を使えばPCとスマホで「:hover」と「:active」を切り替えれる

ジト

スマホのhoverアニメーションをするときに参考にしてみて！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙