キタックCGソリューションセンター

自分で触りたいWeb担のためのTips集

【メディアクエリ】スマホでhoverスタイル適用させない(any-hover)

2022年12月12日(月)

PV 152

実装者向けの記事です。

hover時のスタイルの適用を、メディアクエリを使って制御するやり方を解説します。

タッチデバイスでhoverスタイルを適用しない方法

ボタンなどで、マウスhover時にスタイルを変えるのは常套手段です。

が、スマホなどのタッチデバイスでは、この hover が期待通りに動作しない場合があります。

そんなときは、端末が「hover対応か否か」を判別するメディアクエリが有効です。

any-hover

「any-hover」は、端末が「hover」対応しているかどうかを判別するメディア特性です。

メディアクエリの書き方で、このように実装します。

@media (any-hover: hover) {
  a:hover{
     background-color: orange;
  }
}

@media (any-hover: none) {
  a{
     background-color: yellow;
  }
}

「any-hover: hover」は、hover 対応デバイス(PCなど)の場合、「any-hover: none」は、hover 非対応デバイス(スマホなど)の場合の処理となります。

タッチデバイスで hoverスタイルの動作がおかしい時の制御や、hoverで展開するアコーディオンメニューを最初から展開しておきたいときなど、hover まわりの処理に使えそうです。

any-hover はIEには非対応なので、そちらの対応が必要な場合は、Javascriptなど他の方法が良さそうです。

Share プリーズ
書き手は私

よろしければどうかご感想を!

※コメントは、サイト管理者による承認後、ページに表示されます。

あたたかい感想を書く

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


キタックCGSCコアメンバー

  • 樋口大輔
  • 小林将太
  • ちゃんまき
  • 高橋どらみ
  • 高橋皓一
  • 笠井
  • 石本
  • 佐藤サバ美
  • 佐久間尭