PC操作（マウス操作）のみhoverイベントを対応させる

PC操作時のみhoverしたときにスタイルを変更するといった処理の実装方法を紹介します。

メディアクエリ@media (min-width: ○○px)使用しウィンドウ幅によってPC、スマートフォンの場合分けを行う方法もありますが、今回紹介するのはスマートフォンやタブレットのようなタップ操作をする端末かどうかで場合分けを行う方法です。

コード

@media (any-hover: hover){
  .button:hover {
    background-color: red;
    color: black;
  }
}

メディア特性(any-hover: hover)を使用することでＰＣ操作（マウス操作）のみにhover時のスタイル設定をすることが出来ます。

デモ

See the Pen Untitled by yoshi (@mikanbako) on CodePen.