スマホで:hover疑似クラスを対策する方法【CSS】

:hover疑似クラスを使えば、ホバー時の挙動を実装することができます。

しかし、:hover疑似クラスはスマホ(タッチ端末)とPCでは挙動が違います。この挙動の違いを知らないと、スマホで想定外の動きになり困ることがあります。

この記事では『:hover疑似クラス』について、

• スマホとPCでの:hoverと:activeの挙動の違い
• スマホで:hoverを対策する方法

などを分かりやすく説明するように心掛けています(:active疑似クラスの挙動も合わせて理解したほうが良いので一緒に説明しています)。ご参考になれば幸いです。

スマホとPCでの:hoverと:activeの挙動の違い

スマホ(タッチ端末)とPCでの:hover疑似クラスと:active疑似クラスの違いを下表に示しています。

スマホでの:hover疑似クラスはタップした要素にスタイルが適用された後、違う要素をタップするまでそのスタイルが適用されるので注意してください。スマホでタップしている時のみスタイルを適用したい場合、:active疑似クラスを用いる必要があります。

では、次にスマホ(タッチ端末)で:hover疑似クラスが適用されるのを対策する方法について説明します。

スマホで:hoverを対策する方法

メディアクエリ(@media)にはhoverプロパティがあり、閲覧中の端末がホバーに対応しているデバイスかどうかの判定をすることができます。そのため、hoverプロパティを用いれば、スマホ(タッチ端末)とPCでスタイルを変えることができます。以下にサンプルコードを示しています。

CSSコード

@media (hover: hover) {
  /* ホバーに対応しているデバイスPCを想定したスタイル */
  a:hover {
    color: red;
  }
  a:active {
    color: blue;
  }
}

@media (hover: hover) {
  /* ホバーに対応していないスマホ(タッチ端末)PCを想定したスタイル */
  a:active {
    color: green;
  }
}

HTMLコード

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

上記のサンプルコードをPCでは:hover疑似クラスと:active疑似クラス、スマホでは:active疑似クラスのみにスタイルを適用することができるようになります。

本記事のまとめ

この記事では『:hover疑似クラス』について、以下の内容を説明しました。

• スマホとPCでの:hoverと:activeの挙動の違い
• スマホで:hoverを対策する方法

お読み頂きありがとうございました。