はじめに

Web制作でCSSでhoverを実装することはよくあります。単純に:hoverを使用してホバーのアニメーションは付けられますが、モバイル端末でもホバーアニメーションが動いてしまうなど、ユーザビリティが悪くなってしまいます。

そこで、この問題を解決するhover / any-hoverメディアクエリを紹介します！

hover / any-hoverメディアクエリとは

hover / any-hoverメディアクエリは、ユーザーの入力デバイスが「ホバー操作」に対応しているかどうかを判定するメディアクエリです。

それぞれの仕様の違いと判定の仕組みは下記の通りです。

hoverは主な入力デバイスがホバー操作に対応している場合に適用します。
any-hoverは入力デバイスのどれか一つでもホバー操作に対応していれば適用します。

基本的には、any-hoverを利用したほうが、カバー範囲が広いのでany-hoverを使用するようにしています。

hover / any-hoverメディアクエリを使用したhoverの実装

hover / any-hoverメディアクエリを使用したhoverの実装例は下記の通りです。

/* hoverメディアクエリを使用したhoverの実装例 */
@media (hover: hover) {
  .link:hover {
    color: #000;
  }
}

/* any-hoverメディアクエリを使用したhoverの実装例 */
@media (any-hover: hover) {
  .link:hover {
    color: #000;
  }
}

従来のメディアクエリを使用したhoverの実装の問題点

従来のメディアクエリを使用したhoverの実装の問題点について見ていきます。
PCとモバイルでのホバーアニメーションの分岐のやり方で、下記のように紹介されていることがあるかと思います。

@media (max-width: 767px) {
  .link:hover {
    color: #000;
  }
}

この実装ですと、iPhoneなどのモバイル端末だとホバーアニメーションは動かないのでよいのですが、PCで767px以下の場合にマウス操作なのにホバーアニメーションが動かないという問題があります。

以上の理由より、ホバーアニメーションを実装する場合は、any-hoverを使用するようにしましょう。

SCSSのmixinを使ってhoverを実装する方法

最後に通常のCSSでメディアクエリを書くのは大変なので、SCSSのmixinを使ってhoverを実装する方法を紹介します。

mixin.scssのようなファイルを作成して、mixinを書いていきます。

@mixin hover {
  @media (any-hover: hover) {
    &:hover {
      @content;
    }
  }
}

これで、@include mixin.hoverとすることで、any-hoverを使用したhoverの実装ができます。
以下はリンクのカラーをホバーで黒色に変更する例です。

.link {
  color: #fff;
  transition-property: color;
  transition-duration: 0.3s;

  @include mixin.hover {
    color: #000;
  }
}

これをCSSにコンパイルすると、下記のようになります。

.link {
  color: #fff;
  transition-property: color;
  transition-duration: 0.3s;
}

@media (any-hover: hover) {
  .link:hover {
    color: #000;
  }
}

SCSSを使っているかたは、ぜひmixinを使用して楽にhoverを実装してみてください！

参考

• Media Queries Level 4 - 7.2 Hover Capability