実装者向けの記事です。
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など他の方法が良さそうです。
よろしければどうかご感想を!
※コメントは、サイト管理者による承認後、ページに表示されます。